javascript - 自定义 map 图标可以替换现有的吗？

Question

我正在尝试使用 Google Maps JavaScript API 显示 Anchor Public Taps 的标记。 Anchor Public Taps 就在 Anchor Brewing 旁边，由同一家公司经营。与 Anchor Public Taps 的自动标记橙色图钉相比，Google 用于 Anchor Brewing 的自动标记橙色图钉显示的缩放比例更大。

这是一个问题，因为:

如果我添加自定义标记，它不会附带标签。在文档中，我看到了添加单字母标签、悬停时显示的标签和弹出信息窗口的方法，但这些选项看起来都不像已经存在的橙色 Anchor Brewing 图钉。

如果我添加一个自定义图标作为标记，当您放大时，Google 的自动标记橙色图钉也会弹出，除了我的图标之外，而且位置与我的图标略有不同。

这是我当前的代码:

<script type="text/javascript">
  function initMap() {
    var tapsMap;
    var image = {
      url: '/assets/public_taps/navy_pt_map_icon.png',
      size: new google.maps.Size(90, 55),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(25, 10),
      scaledSize: new google.maps.Size(80, 45)
    };
    var tapsMapOptions = {
      center: {lat: 37.764044, lng: -122.401244},
      zoom: 17
    };
    var tapsMarker = new google.maps.Marker({
      position: {lat: 37.764044, lng: -122.401244},
      icon: image,
      title: 'Anchor Public Taps'
    });
    tapsMap = new google.maps.Map(document.getElementById('public-taps-map'), tapsMapOptions);
    tapsMarker.setMap(tapsMap);
  }
  initMap();
</script>

有没有办法让我的图标替换自动图钉？或者有没有办法隐藏自动出现的 Anchor Brewing pin，或者强制自动 Anchor Public Taps pin 以更大的缩放比例显示？

Picture of zoomed in map with double icons

Picture of initial map load

Answer 1

您可以隐藏所有兴趣点(谷歌的“自动标记橙色图钉”的名称)。 ( search SO for "hide poi" ) 或者你可以只 hide the business pois (不幸的是，您不能只隐藏一种类型的业务兴趣点):

var tapsMap = new google.maps.Map(document.getElementById('public-taps-map'), {
  center: {
    lat: 37.764044,
    lng: -122.401244
  },
  zoom: 17,
  styles: [{
    featureType: 'poi.business',
    stylers: [{
      visibility: 'off'
    }]
  }]
});

proof of concept fiddle

function initMap() {
  var tapsMap;
  var tapsMapOptions = {
    center: {
      lat: 37.764044,
      lng: -122.401244
    },
    zoom: 17,
    styles: [{
      featureType: 'poi.business',
      stylers: [{
        visibility: 'off'
      }]
    }]
  };
  var tapsMarker = new google.maps.Marker({
    position: {
      lat: 37.764044,
      lng: -122.401244
    },
    icon: {
      url: "/image/SlO4O.png",
      anchor: new google.maps.Point(62, 12), // anchor at the center of the icon
    },
    title: 'Anchor Public Taps'
  });
  tapsMap = new google.maps.Map(document.getElementById('public-taps-map'), tapsMapOptions);
  tapsMarker.setMap(tapsMap);
}
initMap();

html,
body,
#public-taps-map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="public-taps-map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&v=3"></script>