Question

我尝试将自定义图片添加为Google地图图标。目前我的自定义图片没有显示，但地图正在运行。我试着按照这里的例子：http://google-maps-utility-library-v3.googlecode.com/svn-history/r150/trunk/markerwithlabel/docs/examples.html

代码：

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="js/markerwithlabel.js"></script>
<script>
function initialize() {
  var myLatlng = new google.maps.LatLng(42.350358,-71.0851531);
  var mapOptions = {
    zoom: 13,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  var pictureLabel1 = document.createElement("img");
  pictureLabel1.src = "images/cake.png";

  var pictureLabel2 = document.createElement("img");
  pictureLabel2.src = "images/hotel.png";

  var marker1 = new MarkerWithLabel({
      position: new google.maps.LatLng(42.341239,-71.111074),
      map: map,
      labelContent: pictureLabel1,
      labelAnchor: new google.maps.Point(50,30),
      labelClass: "labels",
      labelInForeground: true
  });

  var marker2 = new MarkerWithLabel({
      position: new google.maps.LatLng(42.3416983,-71.0705033),
      map: map,
      labelContent: pictureLabel2,
      labelAnchor: new google.maps.Point(1,30),
      labelClass: "labels",
      labelInForeground: true
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

您可以像使用普通google.maps.Marker objects一样为MarkerWithLabel定义自定义图标。将图标属性添加到is并提供图标的URL。

带蓝色图标的工作代码段：

＆＃13;

function initialize() {
  var myLatlng = new google.maps.LatLng(42.350358, -71.0851531);
  var mapOptions = {
    zoom: 13,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  var pictureLabel1 = document.createElement("img");
  pictureLabel1.setAttribute("style","width:50px");
  pictureLabel1.src = "https://cdn.rawgit.com/googlemaps/v3-utility-library/cdde3b25/markerwithlabel/examples/home.jpg";

  var pictureLabel2 = document.createElement("img");
  pictureLabel2.setAttribute("style","width:50px");  
  pictureLabel2.src = "https://cdn.rawgit.com/googlemaps/v3-utility-library/cdde3b25/markerwithlabel/examples/home.jpg";

  var marker1 = new MarkerWithLabel({
    position: new google.maps.LatLng(42.341239, -71.111074),
    map: map,
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
    labelContent: pictureLabel1,
    labelAnchor: new google.maps.Point(50, 0),
    labelClass: "labels",
    labelInForeground: true
  });

  var marker2 = new MarkerWithLabel({
    position: new google.maps.LatLng(42.3416983, -71.0705033),
    map: map,
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",  
    labelContent: pictureLabel2,
    labelAnchor: new google.maps.Point(1, 0),
    labelClass: "labels",
    labelInForeground: true
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas"></div>

＆＃13;

使用MarkerWithLabel添加自定义标记图像

1 个答案: