如何在Google Maps API中的两个标记之间绘制路线？
[英]How to draw a route between two markers in Google Maps API?
问题描述
I have a requirement where, onclick, I have to draw a route in between two markers when I select. 
我有一个要求，当我选择时，我必须在两个标记之间画一条路线。 I have successfully uploaded a KML file on Google MAPS API, so the markers are clearly visible on Google MAPS API. 我已在Google MAPS API上成功上传了KML文件，因此标记在Google MAPS API上清晰可见。
When I select a two markers onclick, there should be a route drawn between the selected markers. 当我选择两个标记点击时，应该在所选标记之间绘制一条路线。 I was able to draw a static route between the two points but the line which was getting drawn was not following the route. 我能够在两点之间绘制一条静态路线，但是被绘制的线路并没有跟随路线。 Please guide. 请指导。 Also please find the code which I have tried. 另请查找我尝试过的代码。 Thanks in advance. 提前致谢。
<!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>
2 个解决方案
解决方案1
9 已采纳 2013-11-10 05:20:28
add a custom "createMarker" function to geoxml3 which adds a function to the marker's click listener to trigger the directions service. 向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;
};
解决方案2
0 2013-11-08 08:49:58
I think you have to get and set new coordinates when you do drag event. 我认为你必须在拖动事件时获取并设置新的坐标。 So you miss this event handler in your code in click event, such as this sample: 因此，您在点击事件中的代码中错过了此事件处理程序，例如此示例：
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()
});
Please also see in this thread: Google Maps drag and dragend event listeners wont work if marker created by click event listener 另请参阅此主题： 如果由click事件侦听器创建标记，则Google Maps drag和dragend事件侦听器将无法工作
Sorry if this couldn't help. 对不起，如果这无济于事。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.