这是我第一次尝试使用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地图,因此我放弃了自己的努力,也许需要执行此操作的其他人会从任何未来的答案中受益。