当你从谷歌地图API中点击地图中的内置位置（不是标记）时，如何自定义弹窗的内容？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当你从谷歌地图API中点击地图中的内置位置（不是标记）时，如何自定义弹窗的内容？相关的知识，希望对你有一定的参考价值。
我说的是这种弹出式窗口，当你点击谷歌地图中的商店（等）时就会出现。
在我的案例中（一个与covid相关的志愿者项目），我们希望用一个链接来取代Google地图上的View on Google Maps CTA，链接到我们的web应用中的一个页面，并预先填充了商店信息。这可能是不可能的（如果不是，欢迎指点），但知道如何能定制弹出窗口是第一要务。
答案
据我了解，您的意图是用您的自定义信息窗口信息替换标准的谷歌地图信息窗口的POI。没有办法通过谷歌地图的javascript API来修改预定义的POI信息窗口。但是，你可以阻止POI的预定义信息窗口，并显示你自己的信息窗口。为此，你应该在地图上添加一个点击事件监听器。每次你点击POI，地图就会触发一个类型为 "点击 "的事件。google.maps.IconMouseEvent:
https:/developers.google.commapsdocumentationjavascriptreferencemap#IconMouseEvent。
所以，如果事件有 placeId 信息，这意味着你点击了POI，在这种情况下，你可以停止事件的传播，以防止标准的信息窗口，并创建自己的信息窗口。
请看以下代码片段
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 17.414571, lng: 78.480922},
zoom: 19
});
var infowindow = new google.maps.InfoWindow();
map.addListener('click', function(event){
if (event.placeId) {
event.stop();
infowindow.close();
infowindow.setPosition(event.latLng);
infowindow.setContent(
'<div>'
+ '<strong>You clicked place</strong><br>'
+ 'Place ID: ' + event.placeId + '<br>'
+ 'Position: ' + event.latLng.lat() + ',' + event.latLng.lng() + '<br>'
+ 'Put here information that you need'
+ '</div>');
infowindow.open(map);
}
});
}#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
async defer></script>以上是关于当你从谷歌地图API中点击地图中的内置位置（不是标记）时，如何自定义弹窗的内容？的主要内容，如果未能解决你的问题，请参考以下文章