传单地图 - 删除标记图层组并添加另一个标记图层组

Question

我的objective这里是使用图层组删除所有添加到传单的标记，用于分页列表page.When导航到其他页面我能够删除上一页的图层组，但是添加新的标记层组（下一页的标记）我在浏览器中收到此错误并且标记未添加到地图

错误是 - 未捕获类型错误：layer.onAdd 不是函数；

代码是

var leaflet_factory = {
    //initializing map container
    initialize: function() {
        var map = L.map('mapresults');
        var googleLayer = new L.Google('ROADMAP');
        map.addLayer(googleLayer);
    },

    //set view of mao
    setview: function(lat, long, zoom) {

        map.setView([lat, long], zoom);

    },

    //add list of markers to maps

    addMarkersList: function(marker_array) {
        var markerArray = [];
        $.each(marker_array, function(key, data) {
            var marker_pointer = L.marker([data.lat, data.long]).bindPopup('<a href="/' + $(this).attr('data-slug') + '"><strong>' + $(this).attr('data-vendor').capitalize() + '</strong><br></a>' + $(this).attr('data-location').capitalize());
            markerArray.push(marker_pointer);
        });
        window.page_makers_layer = L.layerGroup(markerArray);
        window.page_makers_layer.addTo(map);

    },

    //remove the current marker layer group

    removeMarkerLayer: function() {

        map.removeLayer(window.page_makers_layer);

    }
}

上面代码的问题是在初始化它工作的地图容器后第一次调用 addMarkersList 时。但是，当我在调用 removeMarkerLayer 删除现有标记层后使用新的标记列表（lat long pair）调用 addMarkerList 时，它给了我以下错误，我正在尝试调试。

Uncaught TypeError: layer.onAdd is not a function

请指出我做错的地方。

Answer 1

你做错了几件事。不是灾难性的错误，只是反模式错误，例如：

map.removeLayer(window.page_makers_layer);

不要不要使用window 全局变量来存储对您的数据的引用（除非您真的非常非常确定自己在做什么）。如果您将地图创建包装在工厂或模块中，请将您的数据存储在该范围内。

var leaflet_factory = {

如果不符合 factory pattern，请不要将其命名为工厂。非常令人困惑。只是以不同的方式命名，将其改为 CJS 模块，或者完全跳过它。

研究常见的编程模式。您是否有只在网页中出现一次的内容？考虑单身人士。

gives me following error which I am trying to debug.

您打算如何调试它？学习使用浏览器调试功能，并提供完整的堆栈跟踪。

您应该能够轻松跟踪有问题的变量的值，并在调用时查看它是否是 L.LayerGroup 的实例。

传单地图 - 删除标记图层组并添加另一个标记图层组

leaflet maps - remove marker layer group and add another marker layer group

javascript

google-maps

marker

leaflet