Google Maps API v3& AJAX - 删除标记 [英] Google Maps API v3 & AJAX - Removing markers

问题描述

所以我试图让用户点击一个按钮，并设置一组标记来显示一条路线（尚未得到折线）。我已经有了这样的工作，但我想要的是让它在添加新标记之前删除以前的标记。

我试过了很多方法，但我似乎无法为我工作。我不确定是否我做错了或者我的代码中有一些错误，我没有看到。

我看过这里查看我是否可以找到解决方案，但是再次没有。

我确信解决方案非常简单。任何帮助将不胜感激。

代码：

  var route = []; 
 var markers = []; 
 var infowindow = new google.maps.InfoWindow（）; 
 
函数initialise（）{
 var map = new google.maps.Map（document.getElementById（'map-canvas'），{
 center：{lat：37.7833， lng：-122.4167}，
 zoom：10 
}）; 
 
 $（'。route_button input'）。click（function（）{
 clearMarkers（）; 
 markers = []; 
 $ .ajax（{
 url：'include / routeinfo_ajax.php'，
类型：'GET'，
 dataType：'xml'，
 data：{'route'：$（this）.attr （'name'）}，
成功：函数（响应）{
 setMarkerDetails（response）; 
 for（var i = 0; i< route.length; i ++）{
 placeMarkers（map，route [i]）; 
} 
}，
错误：function（xhr）{
 console.log（error）; 
 } 
}）
}）; 
} 
 
 function placeMarkers（map，route）{
 var latLng = new google.maps.LatLng（route [2]，route [3]）; 
 var marker = new google.maps.Marker（{
 position：latLng，
 map：map 
}）; 
 markers.push（marker）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.close（）; 
 infowindow.setContent（route [0]）; 
 infowindow.open（map，this）; 
}）; 
} 
 
函数clearMarkers（）{
 for（var i = 0; i< markers.length; i ++）{
 markers [i] .setMap（null ）; 
} 
 markers = null; //未捕获TypeError：无法读取属性'push'null 
 //当更改为markers = [];标记闪烁，好像它们已被移除，但两组标记现在都已到位，以前没有移除
 
} 
 
函数setMarkerDetails（data）{
 var stations = data.getElementsByTagName（'stations'）[0] .getElementsByTagName（'station'）; 
 for（var i = 0; i< stations.length; i ++）{
 route.push（[
 stations [i] .getElementsByTagName（'name'）[0] .innerHTML， 
 stations [i] .getElementsByTagName（'abbr'）[0] .innerHTML，
 stations [i] .getElementsByTagName（'lat'）[0] .innerHTML，
 stations [i] .getElementsByTagName（'lng'）[0] .innerHTML，
 stations [i] .getElementsByTagName（'address'）[0] .innerHTML，
 stations [i] .getElementsByTagName（'city'）[ 0] .innerHTML，
 stations [i] .getElementsByTagName（'zipcode'）[0] .innerHTML 
]）; 
} 
} 
 
 google.maps.event.addDomListener（window，'load'，initialise）; 
  

谢谢！

编辑：问题仍然存在，并在Firefox中，所以它不是一个浏览器问题。 （使用chrome）

解决方案

p> markers = null;


从for循环中运行。您也不需要将 map 变量传递给您的函数，因为您没有使用它，并且它在全局范围内定义。

  function clearMarkers（）{
 for（var i = 0; i< markers.length; i ++）{
 markers [i ] .setMap（NULL）; 
} 
 
 markers = []; 
} 
  

So I'm trying to allow users to click on a button and for a set of markers to come up showing a route (not gotten to polylines yet). I've got that bit working but what I'd like is to get it so that it deletes the previous markers before adding the new ones.

I've tried a lot of methods but I cannot seem to get any to work for me. I'm not sure if I'm doing it wrong or theres some error in my code I'm not seeing.

I've looked here to see if I could find a solution but again, nothing.

I'm sure the solution is incredibly simple. Any help would be appreciated.

The code:

var route = [];
var markers = [];
var infowindow = new google.maps.InfoWindow();

function initialise(){
    var map = new google.maps.Map(document.getElementById('map-canvas'),{
        center: {lat: 37.7833, lng:-122.4167},
        zoom: 10
    });

    $('.route_button input').click(function() {
        clearMarkers();
        markers = [];
        $.ajax({
            url: 'include/routeinfo_ajax.php',
            type: 'GET',
            dataType: 'xml',
            data: {'route': $(this).attr('name')},
            success: function(response) {
                setMarkerDetails(response);
                for(var i = 0; i<route.length;i++){
                    placeMarkers(map, route[i]);
                }
            },
            error: function(xhr) {
                console.log("error");
            }
        })
    });
}

function placeMarkers(map, route){
    var latLng = new google.maps.LatLng(route[2], route[3]);
    var marker = new google.maps.Marker({
        position:latLng,
        map: map
    });
    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function(){
      infowindow.close();
      infowindow.setContent(route[0]);
      infowindow.open(map, this);
    });
}

function clearMarkers() {
    for(var i=0; i<markers.length; i++){
        markers[i].setMap(null);   
    }
    markers = null;//Uncaught TypeError: Cannot read property 'push' of null
    //when changed to markers = []; markers flash as if theyve been removed but both sets of markers are now in place, the previous are not removed

}

function setMarkerDetails(data){
    var stations = data.getElementsByTagName('stations')[0].getElementsByTagName('station');
    for(var i = 0; i<stations.length;i++){
        route.push([
            stations[i].getElementsByTagName('name')[0].innerHTML,
            stations[i].getElementsByTagName('abbr')[0].innerHTML,
            stations[i].getElementsByTagName('lat')[0].innerHTML,
            stations[i].getElementsByTagName('lng')[0].innerHTML,
            stations[i].getElementsByTagName('address')[0].innerHTML,
            stations[i].getElementsByTagName('city')[0].innerHTML,
            stations[i].getElementsByTagName('zipcode')[0].innerHTML
        ]);
    }
}

google.maps.event.addDomListener(window, 'load', initialise);

Thank-you!

Edit: issue persists, and in firefox too so its not a browser issue. (Using chrome)

解决方案

Just remove this line:

markers = null;

from your for loop and it should work. Also you don't need to pass the map variable to your function as you are not using it and it is defined in the global scope anyway.

function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }

    markers = [];
}

这篇关于Google Maps API v3& AJAX - 删除标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！