未捕获的类型错误：layer.onAdd不是一个函数。

Question

这是我第一次尝试使用Leaflet来显示和处理动态地图，当我尝试添加新的标记层到一个LayerGroup时遇到了错误。

这是我的地图对象，它封装了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调用刷新屏幕（和地图）时（数据通过变量companies返回），我遇到了以下错误：

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

该错误发生在以下代码行中：layers[name].addLayer(mLayer);，这是在updateListings函数中的。

有经验的Leaflet用户能否提供一些建议？谢谢！

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

由于项目的要求是使用Google地图，因此我放弃了自己的努力，也许需要执行此操作的其他人会从任何未来的答案中受益。

- Mike T

---

在线演示始终是调试的最佳方式... - Jonatas Walker

Answer 1

你正在创建一个普通的JavaScript数组，使用var mLayer = [];，但你实际上需要使用Leaflet构造图层数组的方法，这要么是L.layerGroup，要么是L.featureGroup - 取决于交互的数量。根据你的用例，var mLayer = L.layerGroup看起来很适合。

- snkashis