谷歌地图API-在从ajax页面加载新数据之前清除标记、多段线

Google Maps API - clear markers,polylines before load new data from ajax page

本文关键字:清除 段线 数据 ajax 在从 API- 新数据 加载 谷歌地图      更新时间:2024-05-09

我从ajax页面加载标记和多段线,每个请求数据都显示在索引页面上,现在我想在从ajaxPage 获取新数据之前清除数据(标记、多段线…)

索引页:

var gmarkers = []; 
var map = null;
function initialize() {
  var myOptions = {
    zoom: 15,
    center: new google.maps.LatLng(35, 53),
    // mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });
}
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
}

Ajax页面(record2.php):

var polylines = [];
var beaches = [
    ['Bondi Beach',10,15, 4],
    ['Coogee Beach',11,16, 5],
    ['Cronulla Beach',13,15, 3],
    ['Manly Beach',13,17, 2],
    ['Maroubra Beach',12,10, 1]
];
for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    // var polylines = new google.maps.LatLng(beach[1], beach[2]);
    polylines.push(new google.maps.LatLng(beach[1], beach[2]));
    var marker = createMarker(myLatLng,"This place",beach[0])
}
var routes = new google.maps.Polyline({
    path: polylines,
    strokeColor: "#FF0000",
    strokeOpacity: 0.6,
    strokeWeight: 4
});
routes.setMap(map);

问题:在从ajax page加载新数据之前清除多段线、标记等的简单方法?

/--编辑---//em>
我检查谷歌地图API v3的答案:如何删除所有标记?但只是请求页面的第一个请求是响应,接下来的请求将不起作用,我想我错误地添加了一个清晰的地图功能

从索引调用AjaxPage:

$(document).ready(function(){
     $('#loader').hide();
        $("#search_button").click(function() {
            $('#loader').fadeIn(200);
            $('#login_group').slideUp(200);
            $.post("record2.php", {
                time: $('#login_username').val()
            }, function(response){
                setTimeout("finishAjax('login_group', '"+escape(response)+"')", 200);
            });
            return false;
        });
    });
function finishAjax(id, response){
  $('#loader').slideUp(300);
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn(200);
} 

创建变量一个标记数组。然后在创建标记时,添加标记数组。你可以试试这个。

var markerArrays = new Array();
for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    // var polylines = new google.maps.LatLng(beach[1], beach[2]);
    polylines.push(new google.maps.LatLng(beach[1], beach[2]));
    var marker = createMarker(myLatLng,"This place",beach[0]);
    markerArrays.push(marker);
}
$.each(markerArrays, function(index, val) {
    val.setMap(null);
});

只需重置映射
即再次加载映射map = new google.maps.Map(document.getElementById('map'), mapOptions);

您必须创建一个数组来保存所有标记。

如果你想清除所有的标记,你必须通过阵列和

marker.setMap(null)

您可以删除所有标记