[英]Google Maps API V3 - managing polyline
我有這個功能,點擊一個標記后,在一個項目相關的點之間畫一條線。
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)但沒有成功,嘗試重置折線。
在繪制新折線之前,我想實現刪除先前折線的結果。
謝謝你的支持
在地圖上僅為showDetails
保留一條折線的最簡單方法是創建全局折線變量。 這樣,每次調用showDetails
都會修改全局變量。
現在,每次showDetails
運行時都會創建一個新的Polyline,並且不會返回對它的引用,所以我沒有看到將前一行的map設置為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);
}
你在函數本身中定義了polyline
變量,所以一旦函數完成,變量就超出了任何其他方法的范圍(比如setMap(null)
)。
有幾種方法可以做到這一點。 簡單的方法是將函數外部的折線定義為全局變量:
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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.