使用 gmap v3 插件的 Jquery mobile - REFRESH MARKERS答案

【问题标题】：Jquery mobile using gmap v3 plugin - REFRESH MARKERS使用 gmap v3 插件的 Jquery mobile - REFRESH MARKERS
【发布时间】：2012-03-17 00:05:20
【问题描述】：

我有 jquery 移动网站，尝试添加带有动态标记的 gmap (v3)：

 bindMap: function () {

    var markers = mapArray;  //global var with coordinates

    $('#mapContent').gmap({ 'callback': function () {
        var self = this;           
        $.each(markers, function (i, m) {
            if (markers[i][0] && markers[i][1]) {

                self.addMarker({ 'position': new google.maps.LatLng(markers[i][0], markers[i][1]), 'bounds': true }).click(function () {
                    self.openInfoWindow({ 'content': markers[i][2] }, this);
                });
            }
        });
    }
    });

}

它会为我加载一个带有标记的地图，但是一旦我更改了标记并返回到相同的代码来显示此地图，它就会跳过回调函数并且不会使用新的标记渲染新的地图。我尝试在之前调用$('#mapContent').gmap('refresh') 或$('#mapContent').gmap('clear', 'markers')，仍然没有显示新标记..

【问题讨论】：

标签： jquery-mobile google-maps-api-3

【解决方案1】：

我不太清楚你的意思是“回到相同的代码”，但你不能重用相同的地图对象。

我会有一个创建地图的方法和一个添加/刷新标记的方法

function addMarkers(markers, clearOld) {

   if(clearOld) $('#mapContent').gmap('clear', 'markers');

   $.each(markers, function(i, m) {
      $('#mapContent').gmap('addMarker', {
         'position': new google.maps.LatLng(m.lat, m.lng),
         'bounds':true,
         'id' : m.id,
         'icon' : 'img/marker.png'
     },function(map,marker) {
         $(marker).click(function(){
           //do something
         });
     });
   });

}

因此，当您想向地图添加新标记时，只需重用地图并调用 addMarkers

【讨论】：