Google地图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);

感谢您提供的任何帮助。

Loneept

Answer 1

主要是你需要一个数组来存储对标记的引用，然后你可以循环遍历所有标记并将它们的 "map" 属性设置为空，或者只是删除整个数组。

你可以这样尝试：

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 时，你所有的原始标记将被清除，然后新的标记再次添加到循环中。

Answer 2

这是我所做的：

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 以避免混淆...

Google地图API，初始化地图后在ajax添加标记

Google map API, add marker in ajax after initialize the map

javascript

ajax

google-maps

google-maps-api-3

marker