谷歌地图API，初始化地图后在ajax中添加标记

Question

我知道有一些与标题相关的问题，但我没有找到适合我的答案。

这是我的问题：

我正在尝试打印一张地图，其中包含多个标记，通过数据库生成。我在地图下方有一些复选框，可以让我过滤地图上的标记。

所以，当我第一次加载地图时，一切都经过了很好的过滤（取决于默认检查的内容），因为我真的不明白如何在地图已经初始化后添加/删除标记。我必须重新加载地图，还是我错过了什么？

以下是相关代码：

<form>
<input class="test" type="checkbox" name="type" value="1" onclick="test()" checked/>1<br/>
<input class="test"type="checkbox" name="type" value="2" onclick="test()" checked/>2<br/>
<input class="test"type="checkbox" name="type" value="3" onclick="test()" checked/>3<br/>
<input class="test"type="checkbox" name="type" value="4" onclick="test()" checked/>4<br/>

<script>
var checkedValues = $('input:checkbox:checked').map(function() {
    return this.value;
}).get().join('-');

function fetchPlace(filtreType){

$.ajax({
    url:    "ajaxmap.php?type=" + filtreType,
    type : 'GET',
    dataType: 'json',
    success : function(data) {

     // Loop through our array of markers & place each one on the map  
        for( i = 0; i < data.marker.length; i++ ) {
            var myLatlng = new google.maps.LatLng(data.marker[i].log,data.marker[i].lat);
            var marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  title: 'Hello World!'
              });
        }
    }
    ,
    error: function(){
        /// traiter les erreur
    },
    async : true
});
};
function test (){
var checkedValues = $('input:checkbox:checked').map(function() {
        return this.value;
    }).get().join('-');
fetchPlace(checkedValues);
};
fetchPlace(checkedValues);

感谢您提供的任何帮助。

孤独

Answer 1

这是我所做的：

这 2 个坐标数组对应于您在 AJAX 成功中获得的结果。

markers 是一个数组。在addMarkers 函数中，我使用过滤器类型值创建了一个数组。类似markers[filterType] = new Array();

这样，您现在可以轻松识别每种类型的标记并打开或关闭它们。

当然，您需要根据自己的需要进行调整（我使用了按钮，您使用了复选框等），也许您只需要加载一次标记，等等。但您应该能够明白这一点。

var map;
var markers = new Array();

var coords_1 = [
    new google.maps.LatLng(60.32522, 19.07002),
    new google.maps.LatLng(60.45522, 19.12002),
    new google.maps.LatLng(60.86522, 19.35002),
    new google.maps.LatLng(60.77522, 19.88002),
    new google.maps.LatLng(60.36344, 19.36346),
    new google.maps.LatLng(60.56562, 19.33002)];

var coords_2 = [
    new google.maps.LatLng(59.32522, 18.07002),
    new google.maps.LatLng(59.45522, 18.12002),
    new google.maps.LatLng(59.86522, 18.35002),
    new google.maps.LatLng(59.77522, 18.88002),
    new google.maps.LatLng(59.36344, 18.36346),
    new google.maps.LatLng(59.56562, 18.33002)];

function initialize() {

    var mapOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(59.76522, 18.35002)
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    $('button').on('click', function() {

        if ($(this).data('action') === 'add') {

            addMarkers($(this).data('filtertype'));

        } else {

            removeMarkers($(this).data('filtertype'));
        }
    });
}

function addMarkers(filterType) {

    var temp = filterType === 'coords_1' ? coords_1 : coords_2;

    markers[filterType] = new Array();

    for (var i = 0; i < temp.length; i++) {

        var marker = new google.maps.Marker({
            map: map,
            position: temp[i]
        });

        markers[filterType].push(marker);
    }
}

function removeMarkers(filterType) {

    for (var i = 0; i < markers[filterType].length; i++) {

        markers[filterType][i].setMap(null);
    }
}

initialize();

JSFiddle demo

所以在你的情况下，你可以这样做：

var markers = new Array(); // declare this at the beginning of your script

...

// Loop through our array of markers & place each one on the map  

markers[filtreType] = new Array();

for (i = 0; i < data.marker.length; i++) {
    var myLatlng = new google.maps.LatLng(data.marker[i].log, data.marker[i].lat);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Hello World!'
    });

    markers[filtreType].push(marker);
}

编辑：

另一种解决方案是将过滤器类型添加到标记本身并将所有标记推送到同一个数组。您仍然可以识别它们。

var markers = new Array(); // declare this at the beginning of your script

...

// Loop through our array of markers & place each one on the map
for (i = 0; i < data.marker.length; i++) {
    var myLatlng = new google.maps.LatLng(data.marker[i].log, data.marker[i].lat);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Hello World!',
        filterType: filtreType
    });

    markers.push(marker);
}

现在，如果您想删除某种过滤器类型的标记，您可以这样做：

function removeMarkers(filterType) {

    for (var i = 0; i < markers.length; i++) {

        if (marker.filterType === filterType) {

            markers[i].setMap(null);
        }
    }
}

注意：我不知道这是否是一个错字，但请确保您不要混淆filterType 和filtreType。我会将所有内容更改为 filterType 以避免混淆...

Answer 2

主要是您需要一个数组来存储对标记的引用，然后您可以循环遍历所有标记并将它们的“map”属性设置为 null，或者干脆删除该数组。

您可以尝试这样做：

function fetchPlace(filtreType){

  var markers = [];

    $.ajax({
        url:    "ajaxmap.php?type=" + filtreType,
        type : 'GET',
        dataType: 'json',
        success : function(data) {

         // Loop through our array of markers & place each one on the map  
            for( i = 0; i < data.marker.length; i++ ) {
                var myLatlng = new google.maps.LatLng(data.marker[i].log,data.marker[i].lat);
                var marker = new google.maps.Marker({
                      position: myLatlng,
                      map: map,
                      title: 'Hello World!'
                  }); /* <----- AT THIS POINT, MARKER IS CREATED AND PLACED ON THE MAP BY SETTING "map" PROPERTY */
               markers.push(marker); /* <----- HERE YOU ARE STORING THEM, AND YOU CAN ACCESS THEM LATER IN YOUR FUNCTION */

            }
        }
        ,
        error: function(){
            /// traiter les erreur
        },
        async : true
    });



}

我相信这里会发生什么（尽管没有经过测试），当您再次触发 fetchPlace 时，您的所有原始标记都将被清除，然后再次添加到循环中的新标记。