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

Question

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

这是我的问题:

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

因此，我第一次加载 map 时，所有内容都经过了很好的过滤(取决于默认检查的内容)，因为我并不真正了解如何在 map 初始化后添加/删除标记。我是否必须重新加载 map ，或者我是否遗漏了什么？

相关代码如下:

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