谷歌地图Spiderfier，setmap（null）后地图无响应答案

【问题标题】：Google maps Spiderfier, map unresponsive after setmap(null)谷歌地图Spiderfier，setmap（null）后地图无响应
【发布时间】：2014-11-23 06:59:48
【问题描述】：

我有一个函数可以加载我的地图以使我的地图保持静态。

<script>
var delArray = new Array();
var gm;
var map;
var iw;
var oms;

window.onload = function(){
    gm = google.maps;
        map = new gm.Map(document.getElementById('map_canvas'), {
            mapTypeId: gm.MapTypeId.TERRAIN,
            center: new gm.LatLng(-29.335205, 24.793563),
            scrollwheel: false, 
            zoom: 6
        });
    iw = new gm.InfoWindow(); 
        oms = new OverlappingMarkerSpiderfier(map, 
            {markersWontMove: true, markersWontHide: true});
}
</script>

然后我使用另一个函数来构建我的蜘蛛数据。

<script>
function spider(mapData){
    var usualColor = 'eebb22'; 
    var spiderfiedColor = 'ffee22'; 
    var iconWithColor = function(color) { 
        return 'http://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|' + 
        color + '|000000|ffff00'; 
    } 
    var shadow = new gm.MarkerImage( 
        'https://www.google.com/intl/en_ALL/mapfiles/shadow50.png', 
         new gm.Size(37, 34),  // size   - for sprite clipping 
         new gm.Point(0, 0),   // origin - ditto 
         new gm.Point(10, 34)  // anchor - where to meet map location 
    ); 

    oms.addListener('click', function(marker) { 
         iw.setContent(marker.desc); 
         iw.open(map, marker); 
    }); 
    oms.addListener('spiderfy', function(markers) { 
        for(var i = 0; i < markers.length; i ++) { 
            markers[i].setIcon(iconWithColor(spiderfiedColor)); 
            markers[i].setShadow(null); 
        }  
        iw.close(); 
     }); 

     oms.addListener('unspiderfy', function(markers) { 
         for(var i = 0; i < markers.length; i ++) { 
             markers[i].setIcon(iconWithColor(usualColor)); 
             markers[i].setShadow(shadow); 
         } 
     }); 

    var bounds = new gm.LatLngBounds(); 
        for (var i = 0; i < mapData.length; i ++) { 
        var datum = mapData[i]; 
        var loc = new gm.LatLng(datum[0], datum[1]); 
        bounds.extend(loc); 
            var marker = new gm.Marker({ 
                position: loc, 
                title: datum[2], 
                animation: google.maps.Animation.DROP,
                 map: map, 
                 icon: iconWithColor(usualColor), 
                 shadow: shadow 
            }); 
       marker.desc = datum[3]; 
       oms.addMarker(marker);
       delArray.push(marker); 
       } 
       map.fitBounds(bounds); 


 // for debugging/exploratory use in console 
 window.map = map; 
 window.oms = oms;  
}
</script>

另一个从地图中删除标记：

<script>
function delMe(){
if(delArray){
    for(i =0; i <= delArray.length; i++){
        delArray[i].setMap(null);
    }
    this.delArray = new Array();
 }
}
</script>

我的地图数据 (mapData) 来自一个 php 脚本并通过 Jason 传递。这也是我在调用蜘蛛（地图）函数之前调用删除函数的地方。我这样做是为了在传递新数据之前清除地图。

$( document ).ready(function() {
    delMe();
    var pdata = $js_array;
    spider(pdata);              
});

现在，我的问题是所有数据都显示完美，但在调用 delMe() 函数后，它会 100% 清除标记，但随后我的地图变得无响应，在使用新数据调用 spider() 函数时没有加载新数据。

我可以通过重新加载/再次创建地图来解决这个问题，但我想避免这种情况，只使用静态地图。如果我不删除标记，它只会用 100 个混合新旧标记的标记填充地图。

当谈到 javascript/jquery 时，我有点菜鸟，任何帮助将不胜感激！

【问题讨论】：

标签： google-maps markerspiderfier

【解决方案1】：

您的 delMe 函数中似乎缺少 OMS removeMarker 调用，应该是这样的：

function delMe(){
  if (delArray){
    for (i =0; i <= delArray.length; i++){
      oms.removeMarker(delArray[i]);
      delArray[i].setMap(null);
    }
    this.delArray = [];
  }
}

（您可能还有其他问题，但这是一个开始）。

看你写的不是很清楚，但是你用的是JS开发者控制台吗？谷歌“[您的浏览器] 开发者控制台”了解更多信息——它可以让您查看错误是否导致您的地图无响应。

【讨论】：