畫線 - 谷歌地圖API V3

如何繪製標誌和固定點之間的線 - 谷歌地圖API V3畫線 - 谷歌地圖API V3

我用代碼來繪製2個固定點之間的線，把一個標記 使用谷歌API V3

我怎樣才能更換標記位置2個固定點中的一個，而不是？

<!DOCTYPE html> 
<html> 
<head> 
<script 
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCwID2UsBJvwVKEMx_U53brmIC8EOLsBFo&sensor=false"> 
</script> 

<script> 


function initialize() 
{ 

var x=new google.maps.LatLng(52.395715,4.888916); 


var mapProp = { 
    center:x, 
    zoom:4, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 


google.maps.event.addListener(map, "mousemove", function(pt) { 
     document.getElementById("latlgn").innerHTML = pt.latLng; 
    }); 

     var marker = new google.maps.Marker({ 
    draggable: true, 
    position: x, 
    map: map, 
    title: "Your location" 
    }); 


    google.maps.event.addListener(marker, 'dragend', function (event) { 
    document.getElementById("latbox").value = this.getPosition().lat(); 
    document.getElementById("lngbox").value = this.getPosition().lng(); 
}); 

var lat = "80"; 
var lng = "80"; 
var stavanger=new google.maps.LatLng(lat,lng); 
var london=new google.maps.LatLng(51.508742,-0.120850); 

var myTrip=[stavanger,london]; 
var flightPath=new google.maps.Polyline({ 
    path:myTrip, 
    strokeColor:"#0000FF", 
    strokeOpacity:0.9, 
    strokeWeight:2 
    }); 

flightPath.setMap(map); 

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







</script> 
</head> 
<div id="latlong"> 
    <p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p> 
    <p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p> 
    </div> 
<body onLoad="initialize()"> 

<div id="googleMap" style="width:500px;height:380px;"></div> 
<div id="latlgn"></div> 
</body> 
</html>

來源

2012-11-25 manhag

設置myTrip -variable到

[stavanger,marker.getPosition()]

這最初將繪製斯塔萬格和標記位置之間的線。

爲了保持線更新當標記已被移動，則使用marker.dragend的回調內折線（航跡）的的setpath-方法

google.maps.event.addListener(marker, 'dragend', function (event) { 
    document.getElementById("latbox").value = this.getPosition().lat(); 
    document.getElementById("lngbox").value = this.getPosition().lng(); 
    flightPath.setPath([flightPath.getPath().getAt(0), 
         new google.maps.LatLng(this.getPosition().lat(), 
               this.getPosition().lng())]); 
});

按照要求，修改設置線的一端到中心：

var myTrip=[stavanger,map.getCenter()]; 

google.maps.event.addListener(map, 'center_changed', function (event) { 
    flightPath.setPath([flightPath.getPath().getAt(0),this.getCenter()]) 
});

來源

2012-11-25 20:03:09

謝謝......我可以鏈接它與屏幕的中心，而不是標記？ – manhag

是的，有一個方法getCenter（）的地圖和一個事件center_changed（也爲地圖），你只需要設置polyline的變量點爲'map.getCenter（）' –

你可以發送給我修改後的代碼是什麼？或者更多地解釋它？ – manhag

畫線 - 谷歌地圖API V3

回答

相關問題