Question

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

这是我的Map对象，封装了传单的功能：

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

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

更新：我遇到的问题是为什么我不能“重复使用”   在我清除它之后的LayerGroup，以及我将如何做到这一点。我有   在这一天的前半段努力寻求解决方案并且是   当我遇到这个时，即将在jsfiddle上将代码作为演示发布：   https://github.com/Leaflet/Leaflet/blob/master/FAQ.md 您可以添加   Google Maps API作为带插件的Leaflet图层。但请注意   地图体验不会是完美的，因为Leaflet只会充当一个   代理到谷歌地图JS引擎，所以你不会得到所有   使用Leaflet时的性能和可用性优势   图层已打开。

因为项目的要求是使用谷歌地图，我是   放弃我的努力，也许有人需要这样做会受益   从任何未来的答案。

Answer 1

当您真正需要使用Leaflet构造来处理层数组时，您正在使用var mLayer = [];创建一个简单的vanilla javascript数组，这些数组可以是L.layerGroup或L.featureGroup - 取决于交互量。这听起来像是你的用例，var mLayer = L.layerGroup会很好。

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

1 个答案: