Google地图标记无法在移动设备上点击 [英] 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>\n<a>Read more..</a>');
            infowindow.open(map, this);
        }
    })(marker, i));
}

但是，当我使用下面的代码（google的正式方式为google.maps.event.addListener）， 仅显示相同的 InfoWindows 。

But then, when i use the following codes (the formal way of google for "google.maps.event.addListener"), Markers are showing only the same 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));

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