如何在 Google Maps API 中的两个标记之间绘制路线？
Posted
技术标签:
【中文标题】如何在 Google Maps API 中的两个标记之间绘制路线？【英文标题】：How to draw a route between two markers in Google Maps API? 【发布时间】：2013-11-20 04:02:55 【问题描述】：我有一个要求，在点击时，我必须在选择时在两个标记之间绘制一条路线。我已在 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>
【问题讨论】：
您可能正在寻找类似的东西，请查看..***.com/questions/15773388/… Codebreaker ：感谢您的参考，但问题是在点之间绘制的路径不遵循任何路线，它直接连接两个点，我希望折线遵循路线。 什么是kmlload.kml 和lines.kml？你能提供他们的内容，或者测试的样本吗？如果您希望到位置之间的路线遵循道路，则需要使用Directions Service。 example 【参考方案1】：example
向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】：我认为您必须在进行拖动事件时获取并设置新坐标。 所以你在点击事件的代码中错过了这个事件处理程序，比如这个示例：
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()
);
另请参阅此线程： Google Maps drag and dragend event listeners wont work if marker created by click event listener
抱歉，如果这没有帮助。
【讨论】：
以上是关于如何在 Google Maps API 中的两个标记之间绘制路线？的主要内容，如果未能解决你的问题，请参考以下文章
如何更改 Google Maps API V3 中的图标颜色？
Google Maps Api v3：如何更改方向（设置）面板中的默认航点标记？
react-google-maps：如何使用 fitBounds、panBy、panTo、panToBounds 公共 API？