Question

当用户点击复选框时，我想显示或隐藏一些标记。我使用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中我收到此错误：＆＃34;未捕获的异常：未定义纬度或经度。＆＃34;。

我做错了什么？

Answer 1

问题＃1

addMarkers()函数将一组标记作为参数。但是你给它一个带有标记属性的对象数组。他们应该这样宣布：

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

问题＃2

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

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 ，因为这些标记与真正的Google地图标记不同，你需要这个。真实的标记将存储在realMarkers变量中。

由于Gmaps.js没有提供添加/删除某些标记的方法，因此我创建了2个函数，您可以将这些函数添加到代码中。

<强> addMarkersOfType（）

/* Takes the poi type as a parameter */

GMaps.prototype.addMarkersOfType = function (poi_type) {
    // clear markers of this type
    realMarkers[poi_type]=[];
    // for each Gmaps marker
    for(var i=0; i<gMarkers[poi_type].length; i++){
        // add the marker
        var marker = map.addMarker(gMarkers[poi_type][i]);
        // save it as real marker
        realMarkers[poi_type].push(marker);
    }
}

<强> removeMarkersOfType（）

/* Takes the poi type as a parameter */

GMaps.prototype.removeMarkersOfType = function (poi_type) {
    // for each real marker of this type
    for(var i=0; i<gMarkers[poi_type].length; i++){
        // remove the marker
        realMarkers[poi_type][i].setMap(null);
    }
    // clear markers of this type
    realMarkers[poi_type]=[];
}

使用示例

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

JS Fiddle Demo

Answer 2

另一种解决方案可能是使用方法setVisible(true|false)来显示或隐藏标记而不将其从地图中删除。

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

2 个答案:

问题＃1

问题＃2

如何仅添加/删除标记组

使用示例

JS Fiddle Demo