gpt4 book ai didi

javascript - Google map v3 infoWindow addDomListener 用于 HTML 按钮

转载 作者:行者123 更新时间:2023-11-28 01:54:14 24 4
gpt4 key购买 nike

我有一个简单的谷歌地图示例JS文件:

    /*Standard Setup Google Map*/ 
var latlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 15,
center: latlng,
panControl: false,
mapTypeControl: true,
scaleControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};

// add Map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// add Marker
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-25.363882,131.044922)
});

// add Info Window
var infoWindow = new google.maps.InfoWindow();

现在我想在单击 html 模板中的按钮时打开信息框:

HTML 文件:

<body onload="initialize()">
...
<div id="map_canvas"></div>
...
<button id="test">Click</button>
...
</body>

将这些行添加到我的 JS 文件中:

    var onMarkerHTMLClick = function() {

var marker = this;
var latLng = marker.getPosition();
var content = '<div style="text-align: center; font-size:14px;"><center><b>Company GmbH</b></center><div>Broadway Str.5</div><div>45132 Canvas</div></div>';

map.panTo(marker.getPosition());
map.setZoom(15);

infoWindow.setContent(content);

infoWindow.open(map, marker);
};

google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});

google.maps.event.addDomListener(document.getElementById("test"),'click', onMarkerHTMLClick);

错误:marker.getPosition 不是函数为什么这不起作用?如果我对标记本身的单击功能执行相同的操作,窗口将毫无问题地打开..

最佳答案

您需要触发打开信息窗口的事件。也许最简单的方法是将标记存储在全局数组中,或者如果您没有很多标记,则只需按 ID 选择它们即可。

示例

var myButton = document.getElementById('THE_ID');
google.maps.event.addDomListener(myButton, 'click', openInfoWindow);

openInfoWindow 只是您可以触发事件的回调函数。

关于javascript - Google map v3 infoWindow addDomListener 用于 HTML 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19355960/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com