[英]How to draw a route between two markers in Google Maps API?
我有一個要求,當我選擇時,我必須在兩個標記之間畫一條路線。 我已在Google MAPS API上成功上傳了KML文件,因此標記在Google MAPS API上清晰可見。
當我選擇兩個標記點擊時,應該在所選標記之間繪制一條路線。 我能夠在兩點之間繪制一條靜態路線,但是被繪制的線路並沒有跟隨路線。 請指導。 另請查找我嘗試過的代碼。 提前致謝。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Transit layer</title>
<style>
html,body,#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script> function initialize()
{
var myLatlng = new google.maps.LatLng(0, -180);
var mapOptions =
{
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml.parse('kmload.kml');
var geoXml1 = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml1.parse('lines.kml');
var coordinates = [
new google.maps.LatLng(18.9800, 73.1000),
new google.maps.LatLng(19.0361, 73.0617)];
google.maps.event.addListener(map, "click", function (e)
{
var trainpath = new google.maps.Polyline({
path: coordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
trainpath.setMap(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
向geoxml3添加一個自定義的“createMarker”函數,該函數向標記的點擊監聽器添加一個函數來觸發指導服務。
// global variables
var directions = {};
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
// geoxml3 configuration
var geoXml = new geoXML3.parser({
map: map,
createMarker: createMarker,
singleInfoWindow: true
});
// handle the directions service
function processMarkerClick(latLng) {
if (!directions.start) {
directions.start = latLng;
}
else if (!directions.end) {
directions.end = latLng;
directionsService.route({
origin:directions.start,
destination: directions.end,
travelMode: google.maps.TravelMode.DRIVING
},
function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
directionsDisplay.setMap(map);
}
else {
alert("Directions Request failed:" +status);
}
directions.start = null;
directions.end = null;
});
}
}
// custom createMarker function to add hook for the directions service
// (modified from the version in the geoxml3 source)
var createMarker = function (placemark, doc) {
// create a Marker to the map from a placemark KML object
// Load basic marker properties
var markerOptions = geoXML3.combineOptions(geoXml.options.markerOptions, {
map: geoXml.options.map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
});
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
if (!!doc) {
doc.markers.push(marker);
}
// Set up and create the infowindow if it is not suppressed
if (!geoXml.options.suppressInfoWindows) {
var infoWindowOptions = geoXML3.combineOptions(geoXml.options.infoWindowOptions, {
content: '<div class="geoxml3_infowindow"><h3>' +
placemark.name +
'</h3><div>' +
placemark.description +
'</div></div>',
pixelOffset: new google.maps.Size(0, 2)
});
if (geoXml.options.infoWindow) {
marker.infoWindow = geoXml.options.infoWindow;
}
else {
marker.infoWindow = new google.maps.InfoWindow(infoWindowOptions);
}
marker.infoWindowOptions = infoWindowOptions;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function() {
processMarkerClick(marker.getPosition());
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
}
placemark.marker = marker;
return marker;
};
我認為你必須在拖動事件時獲取並設置新的坐標。 因此,您在點擊事件中的代碼中錯過了此事件處理程序,例如此示例:
google.maps.event.addListener(trainpath, 'drag',function(event) {
// set new coordinates for event, event.latLng.lat() and event.latLng.lng()
});
google.maps.event.addListener(trainpath, 'dragend',function(event) {
// set new coordinates for event, event.latLng.lat() and event.latLng.lng()
});
另請參閱此主題: 如果由click事件偵聽器創建標記,則Google Maps drag和dragend事件偵聽器將無法工作
對不起,如果這無濟於事。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.