API Карт Google V3 - управление полилинией

Question

У меня есть эта функция, которая после щелчка по маркеру рисует линию между точками, связанными с элементом.

function showDetails(itemId) 
{ 
    var newlatlng = itemId.position; 
    var xmlhttp; 

    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.open("GET", "index.php?r=items/ajaxdetails&id="+itemId.indice, 
       false); 
    xmlhttp.send(); 




    var checkins = JSON.parse(xmlhttp.responseText); 
    var numeroCheckins = checkins.length; 

    var polylineCheckins = []; 

    var bounds = new google.maps.LatLngBounds(); 

    for (counter = 0; counter< numeroCheckins; counter++) 
    { 
     var posizione = new google.maps.LatLng(checkins[counter].lat, 
               checkins[counter].long); 
     polylineCheckins[counter] = posizione; 
     bounds.extend(posizione); 
    } 

    var polyline = new google.maps.Polyline({ 
     path: polylineCheckins, 
     strokeColor: "#FF0000", 
     strokeOpacity: 0.5, 
     strokeWeight: 5 
     }); 

    polyline.setMap(map); 

    map.fitBounds(bounds); 
} 

Все работает, но если вызов вызывает несколько раз эту функцию, всегда отображается предыдущая строка. Я попытался использовать метод setMap (null), но безуспешно, чтобы попытаться сбросить полилинию.

Я хотел бы достичь результата удаления предыдущей полилинии, прежде чем рисовать новую.

Спасибо за вашу поддержку

Answer 1

Самый простой способ сохранить только одну полилинию для showDetails на карте, чтобы сделать глобальную переменную полилинию. Таким образом, каждый раз, когда showDetails называется глобальной переменной, изменяется.

Прямо сейчас, каждый раз, когда создается showDetails, создается новая полилиния, и никакая ссылка на нее не возвращается, поэтому я не вижу способ установить для карты предыдущей строки значение null.

// GLOBAL 
    var detailsPolyline = new google.maps.Polyline({ 
    strokeColor: "#FF0000", 
    strokeOpacity: 0.5, 
    strokeWeight: 5 
    }); 

внутри showDetails:

detailsPolyline.setPath(polylineCheckins); 
detailsPolyline.setMap(map); 

map.fitBounds(bounds); 

Вот весь тест я использовал, потому что у меня нет файла PHP я создал мои собственные объекты

var map; 
    var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2, 
    mapTypeId: google.maps.MapTypeId.ROADMAP }; 

    function initialize() { 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    showDetails([ {lat: 20, long: 0}, 
        {lat: 20, long: 10}, 
        {lat: 30, long: 20}]); 

    showDetails([ {lat: 10, long: 0}, 
        {lat: 10, long: 10}, 
        {lat: 20, long: 20}]); 
    } 

    var detailsPolyline = new google.maps.Polyline({ 
    strokeColor: "#FF0000", 
    strokeOpacity: 0.5, 
    strokeWeight: 5 
    }); 

function showDetails(checkins) 
{ 
    var numeroCheckins = checkins.length; 
    var polylineCheckins = []; 
    var bounds = new google.maps.LatLngBounds(); 

    for (counter = 0; counter< numeroCheckins; counter++) 
     { 
     var posizione = new google.maps.LatLng(checkins[counter].lat, checkins[counter].long); 
     polylineCheckins[counter] = posizione; 
     bounds.extend(posizione); 
     } 

    detailsPolyline.setPath(polylineCheckins); 
    detailsPolyline.setMap(map); 

    map.fitBounds(bounds); 
} 

Answer 2

Вы определение polyline переменных внутри самой функции, так как только функция завершается, переменное выходят за рамки любых других методов (например, setMap(null)).

Существует несколько способов сделать это. Simplist способ определить вашу полилинию вне функции в качестве глобальной переменной:

var polyline = null; 

function showDetails(itemId) 
{ 
    if (polyline != null) 
    { 
    polyline.setMap(null); 
    polyline = null; 
    } 

    /* more code */ 

    polyline = new google.maps.Polyline({ 
    path: polylineCheckins, 
    strokeColor: "#FF0000", 
    strokeOpacity: 0.5, 
    strokeWeight: 5 
    }); 

    polyline.setMap(map); 

    map.fitBounds(bounds); 
}