【问题标题】:GoogleMap Markers are Not Clickable on the Mobile DevicesGoogleMap 标记在移动设备上不可点击
【发布时间】:2012-02-18 01:57:18
【问题描述】:

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

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.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);
    });

【问题讨论】:

    标签: google-maps mobile geolocation google-maps-markers infowindow


    【解决方案1】:

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

    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));
    

    【讨论】:

      【解决方案2】:

      我找到了以下解决方案: 1. 使用选项创建标记

      "optimized: false" : ex => new google.maps.Marker({..., optimized: false, ...});
      
      1. 添加另一个事件监听器

      google.maps.event.addDomListener(marker, "click", function() {...});

      From google forum

      【讨论】:

        猜你喜欢
        • 2012-02-17
        • 2018-02-03
        • 2015-11-22
        • 1970-01-01
        • 2019-03-19
        • 2013-12-07
        • 2020-03-21
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多