如何自定义基本Google Map的地点标记的行为?

时间:2016-06-01 22:18:05

标签: javascript google-maps google-maps-api-3

我一直在使用Google Maps API,虽然我可以添加和自定义自己的标记和信息窗口,但基本地图有这些默认标记,可在点击时显示这些信息窗口(下图)。

有没有办法在点击这些位置时删除此行为或实现我自己的行为(使其与我的应用程序添加的标记的行为更加一致)?

例如,在点击这些标记时能够添加我自己的标记会很好。类似的东西:

defaultMarker.addListener("click", function () {
    myMarker = new google.maps.Marker({ ... });
});

除了......我不知道如何获取这些默认标记。

如果之前已经回答了这个问题,或者我刚刚完全错过了一些基本信息,那么道歉,但由于缺乏更好的术语,我找不到任何关于这些“默认标记”的文档。

Google Maps Default Marker and InfoWindow

2 个答案:

答案 0 :(得分:5)

Maps JavaScript API的当前版本3.24在Map Options对象中有一个属性clickableIcons:

https://developers.google.com/maps/documentation/javascript/reference#MapOptions

您可以使用此属性通过将clickableIcons属性设置为false来关闭地图上的可点击图标。还存在一个setClickableIcons()方法。

请查看此示例:http://jsbin.com/liyamecoqa/edit?html,output

答案 1 :(得分:5)

在最新版本3.26中,您可以使用位置标记点击进行更多操作。

您应该收听Map对象的“click”事件。如果用户单击POI,则会引发IconMouseEvent。此类扩展了Regular MouseEvent并包含一个名为placeId的属性。

在click事件处理程序中,您可以检查事件对象是否已定义placeId。如果有,那么你有点击位置的地方ID。您应该在事件上调用stop()方法以防止地图显示标准信息窗口。您可以使用Places API获取有关所单击图标的更多信息,并打开一个信息窗口,其外观和行为都是您自己的信息窗口。

我准备了一个小型演示,展示了如何做到这一点:

http://jsbin.com/parapex/10/edit?html,output

ClickEventHandler对象负责路由到单击的位置,并从Places服务获取详细信息并将其显示在自定义信息窗口中。