Google Maps API 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運行一個新的Polyline被創建並且沒有對它的引用被返回，所以我沒有看到一種方法來將上一行的映射設置爲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); 

下面是我用了整個測試的情況下，因爲我沒有我創建了自己的對象

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); 
}