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

【问题标题】：Adding custom marker image with MarkerWithLabel使用 MarkerWithLabel 添加自定义标记图像
【发布时间】：2014-11-03 00:36:14
【问题描述】：

我正在尝试将自定义图像添加为谷歌地图图标。目前我的自定义图像没有显示，但地图可以正常工作。我正在尝试按照此处的示例进行操作：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>

【问题讨论】：

您的帖子中没有创建自定义标记图标的代码。

标签： javascript html google-maps google-maps-api-3

【解决方案1】：

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

带有蓝色图标的工作代码 sn-p：

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);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/packages/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas"></div>

【讨论】：