Javascript Gmaps.js从数组中添加/删除标记

我想在用户单击复选框时显示或隐藏一些标记。我使用的代码是：

// Check if the user wants to display points of interest
$("#poi").click(function() {
    var poi_markers = [];

    if ($("#poi").is(':checked')) {
        // Get points of interest and display them on the map
        $.ajax({
            type: "POST",
            url: "/ajax/poi.php",
            dataType: "JSON",
            cache: false,
            success: function(data) {
                $.each(data, function(key, value) {
                    poi_marker = {
                        marker: {
                            lat: value.latitude,
                            lng: value.longitude,
                            icon: '/images/marker-sight.png',
                            infoWindow: {
                                content: value.name
                            }
                        }
                    }
                    poi_markers.push(poi_marker);
                });

                console.log(poi_markers);

                map.addMarkers(poi_markers);
            }
        });
    } else {
        map.removeMarkers(poi_markers);
    }
});

示例JSON：

[{"name":"Biserica Neagra","latitude":"45.640981","longitude":"25.587723"}]

在Firebug中，我得到了这个错误：“未捕获的异常：未定义纬度或经度。”

我做错了什么？

问题1

addMarkers（）

函数将标记数组作为参数。但您给它一个带有标记属性的对象数组。应当这样宣布：

poi_marker = {
    lat: value.latitude,
    lng: value.longitude,
    infoWindow: {
        content: value.name
    }
}

map.removeMarkers();

问题2

removeMarkers（）

函数不接受任何参数，因为它删除了所有标记。应该这样称呼：

poi_marker = {
    lat: value.latitude,
    lng: value.longitude,
    infoWindow: {
        content: value.name
    }
}

map.removeMarkers();

---

如何仅添加/删除标记组 为了清楚起见，既然我认为您会明白如何做到这一点，我将省略Ajax部分，并假设您在收集标记后，所有标记都是这样定义的：

var realMarkers = {},
    gMarkers = {
        bars: [
            {lat:"45.640981",lng:"25.587723",infoWindow:{content:"Irish Pub"}},
            {lat:"45.645911",lng:"25.582753",infoWindow:{content:"Beer King"}}
        ],
        transportation: [
            {lat:"45.645981",lng:"25.590723",infoWindow:{content:"Subway"}},
            {lat:"45.640981",lng:"25.583723",infoWindow:{content:"Train"}},
            {lat:"45.636981",lng:"25.580723",infoWindow:{content:"Airport"}}
        ]
    };

如您所见，我使用了一个对象

gMarkers

，其中g代表Gmaps.js，因为这些标记不同于真正的谷歌地图标记，您需要它。实际标记将存储在

realmarkets

变量中

由于Gmaps.js不提供只添加/删除一些标记的方法，所以我创建了两个函数，您可以将它们添加到代码中

addMarkersOfType（）

---

另一种解决方案是使用方法

setVisible（true | false）

显示或隐藏标记，而不将其从映射中删除。

您能提供JSON文件的示例吗？或者更好的是，a.Sure:

[{“name”：“Biserica Neagra”，“latitude”：“45.640981”，“longitude”：“25.587723”}]

我正在使用的纬度和经度语法是正确的。无论如何，我尝试了你的演示，但是在你取消选中该选项后，标记仍然在地图上。感谢你指出阵列的问题。问题是，我必须让用户隐藏标记，因为有多种类型的标记（兴趣点、俱乐部、酒吧等），如果标记无法隐藏，地图将变得拥挤。@Cosmin Gmaps.js似乎不能只隐藏一些标记，它会将它们全部删除。您可能需要重新创建自己的函数。请提供一个包含不同poi类型的JSON示例（例如带有

类型

属性），我将看看我能做些什么。（不是在评论中，编辑你的问题）我对每种类型的标记都有一个ajax请求，并且我将每个json响应保存在一个数组中。所以最后我有了以下的标记数组：“poi_标记”，“票务中心标记”等等。。。有关于如何按类别删除这些标记的提示吗？

$("#bar_poi").click(function() {
    if ($(this).is(':checked')) 
        map.addMarkersOfType("bars");
    else 
        map.removeMarkersOfType("bars");
});