如何在谷歌地图中的两个标记之间绘制路线
how to draw a route between two markers in google maps
嗨，我正在尝试使用 javascript 在两个标记之间绘制路线图。我已经尝试了在线找到的各种示例，但是在尝试不同的示例时没有加载我的地图。我无法找出错误的原因。我的地图只是无法加载。
我正在尝试为以下两个标记绘制一条路线。
<script>
function mapLocation() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(37.334818, -121.884886);
var mapOptions = {
zoom: 7,
center: chicago
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = new google.maps.LatLng(37.334818, -121.884886);
var end = new google.maps.LatLng(38.334818, -181.884886);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
mapLocation();
</script>
有人可以帮我在两个标记之间画一条路线吗？
两条评论：
- 您的问题询问标记之间的方向，但您发布的代码中没有标记。LatLng 对象定义了两个位置。方向服务将自动在路线的起点和终点添加标记。 如果要获取两个标记之间的方向，则需要先将它们添加到地图中。
- 发布的代码中没有调用calcRoute(我添加了一个"路由"按钮，导致它被执行(。
问题：
- 方向服务将返回原始点的ZERO_RESULTS，因此不会绘制任何路径。在 else 情况下为
if (status == "OK")测试添加错误处理以查看。 - 如果我将点更改为实际可以路由的位置(加利福尼亚州帕洛阿尔托(，则不会呈现方向服务路线，因为您从未设置方向服务的"map"属性
工作小提琴
function mapLocation() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(37.334818, -121.884886);
var mapOptions = {
zoom: 7,
center: chicago
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
}
function calcRoute() {
var start = new google.maps.LatLng(37.334818, -121.884886);
//var end = new google.maps.LatLng(38.334818, -181.884886);
var end = new google.maps.LatLng(37.441883, -122.143019);
var bounds = new google.maps.LatLngBounds();
bounds.extend(start);
bounds.extend(end);
map.fitBounds(bounds);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
} else {
alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
mapLocation();
工作代码片段：
function mapLocation() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(37.334818, -121.884886);
var mapOptions = {
zoom: 7,
center: chicago
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
}
function calcRoute() {
var start = new google.maps.LatLng(37.334818, -121.884886);
//var end = new google.maps.LatLng(38.334818, -181.884886);
var end = new google.maps.LatLng(37.441883, -122.143019);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
} else {
alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
mapLocation();html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="button" id="routebtn" value="route" />
<div id="map-canvas"></div>很多错误。首先是地理位置。你的第二个位置是错误的，因为经度只能从+180到-180，所以-181在地球上不存在！其次，正如MrUpstanddown在评论中提到的，您正在调用函数中的函数。首先更正地理位置，然后更正函数调用，这应该可以解决您遇到的问题。
在开始代码之前，请务必正确检查/配置您的谷歌地图 API 及其订阅计划(不用担心它不会花费您一分钱。只需从云门户添加配置(。如果上述配置中存在错误，您将无法加载地图。
请参考以下脚本获取两点之间的路线。为了便于理解，我以最简单的方式写了。
<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>
</head>
<style type="text/css">
#map{
height: 80%;
}
html , body {
height: 100%;
}
</style>
<body onload="myfunction();">
<div id="map">
</div>
<script type="text/javascript">
function myfunction(){
var map;
var start = new google.maps.LatLng(7.434876909631617,80.4424951234613);
var end = new google.maps.LatLng(7.3178281209262686,80.8735878891028);
var option ={
zoom : 10,
center : start
};
map = new google.maps.Map(document.getElementById('map'),option);
var display = new google.maps.DirectionsRenderer();
var services = new google.maps.DirectionsService();
display.setMap(map);
var request ={
origin : start,
destination:end,
travelMode: 'DRIVING'
};
services.route(request,function(result,status){
if(status =='OK'){
display.setDirections(result);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=**Your API KEY**&libraries=places"></script>
</body>
</html>
相关文章：
- 如何在javascript中获取两个日期之间的周六和周日的日期
- 在Google Analytics中跟踪用户，但只能在两个操作之间跟踪
- 如何在两个不同的iframe HTML之间进行通信
- 有效地获取两个区间之间的随机整数
- 如何用moment.js列出两个日期之间的所有月份
- jQuery在两个字符串标识符之间选择HTML
- JavaScript中的RegEx:两个标签之间的内容
- moment.js在两个时区格式的日期之间存在差异
- Javascript-如何使用bootstrap日期时间选择器自动计算两个时间输入之间的差异
- 计算HTML表TD中两个数字之间的百分比
- 用时间戳获取两个不同日期之间的时间差
- 通过共享服务在两个不同ng应用程序中的控制器之间共享数据
- 如何在jQuery中获取两个事件之间的时间差
- 通过node.js和socket.io在两个用户之间发送消息
- JavaScript函数，用于计算两个日期之间的年、月和天数
- 有没有一种方法可以从两个标签之间提取文本，并以我选择的格式输出
- 如何在两个
之间共享数据?使用AngularJS和温泉UI - 用于删除两个“”之间的字符的正则表达式是什么/"在javascript中
- 如何在两个"h "之间选择元素除了一个元素使用jquery
- 在JavaScript中从字符串中获取两个'/'之间的文本
