谷歌地图-自定义标记图标出现在默认图标下

Google Maps - Custom Marker Icon appears under the default icon

本文关键字：图标 默认 谷歌地图 自定义      更新时间：2023-09-26

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

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

这样做会在地图上添加一个新的标记，但它会在默认图标(红色位置符号)下添加自定义图标。这很奇怪。什么好主意吗?

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

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

下面是完整的代码片段，来自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>

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

相关文章：