GoogleMap 标记在移动设备上不可点击 [英] GoogleMap Markers are Not Clickable on the Mobile Devices

问题描述

GoogleMap 标记在移动设备上不可点击(触摸屏).
但是，在任何 PC 上都可以，所以我不知道有什么意义.
这是我的代码:

GoogleMap Markers are Not Clickable on the Mobile Devices (Touch Screens).
But, ok on any PC, so I can't figure out what is the point.
Here is my code:

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(60.037760, -44.100494),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var locations = [
                    ['4lvin', 60.074433, -44.011917],
                    ['5irius', 60.037760, -44.100494]
                ];

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

    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent('<h2>'+locations[i][0]+'</h2>
<a>Read more..</a>');
            infowindow.open(map, this);
        }
    })(marker, i));
}

但是，当我使用以下代码(谷歌的google.maps.event.addListener"的正式方式)时，Markers 只显示相同的 InfoWindows.

    var infowindow = new google.maps.InfoWindow({content: locations[i][0]});
    new google.maps.event.addListener( marker, 'click', function() {
        infowindow.open(map,this);
    });

推荐答案

问题是因为你在做一个循环，你需要使用一个闭包，否则所有的标记只会得到你想要关联到最后的内容标记.您的第一段代码正确地执行了此操作.建议您更改以再次执行相同操作:

The problem is because you're doing a loop, you need to use a closure, otherwise all markers will just get the content you want to associate with the last marker. Your first bit of code is doing this correctly. Suggest you change to do the same again:

var infowindow = new google.maps.InfoWindow({content: locations[i][0]});
google.maps.event.addListener( marker, 'click', function(marker, i) {
  return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map,this);
  }
})(marker, i));

这篇关于GoogleMap 标记在移动设备上不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！