Question

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

这是一个问题，因为：

如果我添加了自定义标记，则它没有标签。在文档中，我看到了添加单字母标签，悬停时显示的标签以及弹出信息窗口的方法，但是这些选项看上去都不像已经存在的橙色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图钉，或强制自动Anchor Public Taps图钉以更大的缩放比例显示？

Picture of zoomed in map with double icons

Picture of initial map load

Answer 1

您可以隐藏所有POI（Google的“自动标记的橙色图钉”名称）。（search SO for "hide poi"）或者您也可以hide the business pois（不幸的是，您不能只隐藏一种类型的业务Poi）：

Int(...)

proof of concept fiddle

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

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: "https://i.stack.imgur.com/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;
}

自定义地图图标可以替换现有的地图图标吗？

1 个答案: