javascript - 谷歌地图动态添加标记

标签 javascript google-maps

我想在我的 map 中添加动态标记,其中每个标记位于经度 [i] 和纬度 [i],并且我希望在用户单击标记时打开一个弹出窗口,在 url 中窗口 &id=id[i].

我尝试使用以下方法:

  <script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(48, 2),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

for (var i = 0; i < id.length; i++) {
var position = new google.maps.LatLng(latitude[i],longitude[i]);
marker[i] = new google.maps.Marker({
  position: position,
  map: map
});

marker[i].setTitle("pv");
google.maps.event.addListener(marker[i], 'click', function() {
window.open('blah.php?id='+id[i],'name','height=1000,width=1000')
});

}
}

google.maps.event.addDomListener(window, 'load', initialize);
  </script>

它似乎不起作用,因为当点击标记时,函数 addListener 将被调用,此时 i = id.length

我想要的是 marker[0] 打开带有 id[0] 的窗口,id[1] 用于 marker[1] 等...

最佳答案

你能试试替换这个吗-

google.maps.event.addListener(marker[i], 'click', function() {
    window.open('blah.php?id='+id[i],'name','height=1000,width=1000')
});

通过这个-

(function (i) {
    google.maps.event.addListener(marker[i], 'click', function() {
        window.open('blah.php?id='+id[i],'name','height=1000,width=1000')
    });
})(i);

将监听器包装在闭包中将以当时的状态执行它。 查看更多详细信息 - adding 'click' event listeners in loop

关于javascript - 谷歌地图动态添加标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17989329/

相关文章:

javascript - 使用 MobX 中的 `useLocalObservable` 来处理 TypeScript 时出现 TypeError?

javascript - Angular JS 对两个两个 URL 使用一个 View

<div> 中的 JavaScript 函数悬停

javascript - "Uncaught TypeError: Cannot read property ' 在 p5.js 上绑定(bind) ' of undefined"

javascript - 如何处理按钮的onclick事件?

javascript - 地理编码示例应用程序中的空白

ios - 如何在 iOS 的谷歌地图上使用 CLLocationManager 生成我的旅行路径?

android - 如何从 map 中删除所有折线

iOS Google Maps SDK 替换标记图标

JavaScript Google Maps API 如何将位置经/纬度存储到全局变量