未捕获的TypeError:layer.onAdd不是函数

Question

首次尝试使用Leaflet显示和使用动态地图,当我尝试向LayerGroup添加新的标记层时,我遇到了错误.

这是我的Map对象,封装了leaflet的功能:

function Map() {
  //properties/fields
  var map;
  var layers = [];  

  return {
    setMap: function(aMap) {map=aMap;},
    setView: function(aView) {map.setView(aView);},
    addLayer: function(aLayer, name) {layers[name] = aLayer; map.addLayer(aLayer);},    
    addListings: function(anArr, name) {
        var mLayer = [];                                           
        for (var i = 0; i < anArr.length; i++) {
            var aMarker = L.marker([anArr[i][0], anArr[i][1]]);
            mLayer.push(aMarker);                            
        };
        layers[name] = L.layerGroup(mLayer);
        layers[name].addTo(map);
    },
    updateListings: function(anArr, name) {
        var mLayer = [];
        for (var i = 0; i < anArr.length; i++) {
            console.log(anArr[i].entity.locations[0].lat, anArr[i].entity.locations[0].lng);
            var aMarker = L.marker(anArr[i].entity.locations[0].lat, anArr[i].entity.locations[0].lng);
            mLayer.push(aMarker);
        }
        layers[name].addLayer(mLayer);
    },
    clearLayer: function(name) { layers[name].clearLayers(); },
  };
}

当我最初加载地图时,一切都很好:

                myMap.setMap(L.map('tikit-map').setView([{{ $result['lat'] }}, {{ $result['lng'] }}], 12));                        
                var listLocation = [];
                @foreach ($result['company'] as $facility)                        
                    listLocation.push([{{ $facility['entity']['locations'][0]['lat'] }}, {{ $facility['entity']['locations'][0]['lng'] }}]);                            
                @endforeach  
                myMap.addListings(listLocation, 'listings');                      

然后,当我需要通过ajax调用刷新屏幕(和地图)时(数据通过变量公司返回,我得到错误:

myMap.clearLayer('listings');
myMap.updateListings(companies, 'listings');    

该错误特别出现在该行中:

layers[name].addLayer(mLayer);

updateListings

任何有传单经验的人可以提供一些建议吗？谢谢

更新:我已经解决了为什么我在清除它之后无法"重用"LayerGroup的问题,以及我将如何去做.我在今天上半年一直在努力寻找解决方案,当我遇到这个问题时,他正准备将代码作为jsfiddle上的演示发布:https : //github.com/Leaflet/Leaflet/blob/master/FAQ. md 您可以使用插件将Google Maps API添加为Leaflet图层.但请注意,地图体验并不完美,因为Leaflet只是作为Google Maps JS引擎的代理,因此当Google图层打开时,您将无法获得使用Leaflet的所有性能和可用性优势.

由于项目的要求是使用谷歌地图,我放弃了我的努力,也许需要这样做的人将从任何未来的答案中受益.

Answer 1

你正在创建一个普通的vanilla javascript数组var mLayer = [];,当你真的需要使用Leaflet构造的图层数组时,它是L.layerGroup或者L.featureGroup- 取决于交互量.这听起来像你的用例,var mLayer = L.layerGroup会没事的.