Question

我无法在google places API中自定义“点击”信息窗口。我可以使用places api来查找位置并自定义搜索到的infoWindows（图片1），但我似乎无法弄清楚如何自定义由places图标（图片2）启动的infoWindows。

我道歉，我的问题的一部分是我不知道那些特定的infoWindows被调用，如果我这样做，我可能能够搜索解决方案。看来这个网站上的大多数问题与自定义搜索到的infoWindow内容有关，我已经成功地做到了这一点。

Searched Customized InfoWindow (image 1)

The InfoWindow that I want to customize and is launched by icons on the map (image 2)

Answer 1

这些被称为clickableIcons。来自the documentation

clickableIcons |输入：boolean
如果为false，则无法单击地图图标。地图图标表示兴趣点，也称为POI。默认情况下，地图图标是可点击的。

和

getClickableIcons（） |返回值：布尔值
返回地图图标的可点击性。地图图标表示兴趣点，也称为POI。如果返回的值为true，则可以在地图上单击图标。

要控制InfoWindow，请停止打开默认窗口，如IconMouseEvent文档中所述：

google.maps.IconMouseEvent 对象规范

当用户点击地图上的图标时，会发送此对象。此地点的地点ID存储在placeId成员中。 要阻止显示默认信息窗口，请在此事件上调用stop（）方法以防止其传播。在Places API开发人员指南中了解有关地点ID的详情。

proof of concept fiddle

代码段

＆＃13;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var iw = new google.maps.InfoWindow();
  google.maps.event.addListener(map, 'click', function(evt) {
    evt.stop()
    if (evt.placeId) {
      console.log(evt.placeId);
      iw.setContent(evt.placeId);
      iw.setPosition(evt.latLng);
      iw.open(map);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map_canvas"></div>

＆＃13;

自定义Google商家信息地图API“图标”InfoWindows

1 个答案: