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

【问题标题】：leaflet maps - remove marker layer group and add another marker layer group传单地图 - 删除标记层组并添加另一个标记层组
【发布时间】：2016-06-16 15:07:23
【问题描述】：

我的目标是使用图层组为分页列表页面删除添加到传单的所有标记。导航到其他页面时，我可以删除前一页的图层组，但添加新的图层组标记（标记下一页）我在浏览器中收到此错误，并且标记未添加到地图中

error is - Uncaught TypeError: layer.onAdd is not a function;

代码是

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

请指出我做错的地方。

【问题讨论】：

仍然没有足够的信息来帮助您。无论如何，你只在initialize 范围内定义你的map 是很奇怪的。
是的，这很糟糕。但这不是我在生产中拥有的实际代码。实际代码是由现在不属于团队的其他人编写的更糟糕的代码。无论如何，谢谢教育我。

标签： javascript google-maps leaflet marker

【解决方案1】：

你做错了一些事情。不是灾难性错误，只是反模式错误，例如：

map.removeLayer(window.page_makers_layer);

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

var leaflet_factory = {

如果不遵循factory pattern，请勿将其命名为工厂。这非常令人困惑。只需将其命名为不同的名称，将其改为 CJS 模块，或完全跳过它。

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

给出了我正在尝试调试的以下错误。

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

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

【讨论】：