Google 地图 - 自定义标记图标显示在默认图标下方答案

【问题标题】：Google Maps - Custom Marker Icon appears under the default iconGoogle 地图 - 自定义标记图标显示在默认图标下方
【发布时间】：2015-08-28 16:34:41
【问题描述】：

我想在地图上添加一个带有自定义图标的标记。

 marker = new google.maps.Marker({
   position: coords,
   map: map
 });        
if(attrs.icon)
    marker.setIcon(attrs.icon);

这样做会在地图上添加一个新标记，但会在默认图标（红色位置符号）下添加自定义图标。这很奇怪。有什么想法吗？

【问题讨论】：

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

【解决方案1】：

通常，您可以使用以下方式添加自定义图标：

  var image = 'http://i.imgur.com/OG4CZt3.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image
  });

这是完整的 sn-p，from the docs

#map {
    height: 250px;
}

<div id="map"></div>

<script>
// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  var image = 'http://i.imgur.com/OG4CZt3.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image
  });
}
</script>
<script async defer
     src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap"></script>

这样做应该可以防止自定义图标出现在默认图标下方。

【讨论】：