如何使用Google Maps API创建路线 [英] How to create a route using Google Maps API
本文介绍了如何使用Google Maps API创建路线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在html文件中明确指出的两个地方之间创建路由。我试图尽可能地复制google文档，但这似乎不起作用。
I am trying to create a route between two places, explicitly noted in the html file. I tried to copy the google documentation as best as I can, but it just doesn't seem to work.
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Breadcrumbz</title>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h1>MAP!?!</h1>
<div id="map"></div>
<button onclick="calcRoute()">Click me</button>
<script>
var directionsDisplay;
var directionService = new google.maps.DirectionsService();
function initMap() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 7,
center: chicago
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute(){
var start = new google.maps.LatLng(41.850033, -87.6500523);
var end = new new google.maps.LatLng(37.3229978, -122.0321823);
var request = {
origin: start,
destination: end,
travelMode: 'DRIVING'
};
directionsService.route(request, function(response, status) {
if(status == 'OK') {
directionsDisplay.setDirections(response);
} else {
}
});
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHqgK27rLZ-mWuh2Ha1wPCkMGVs0MDoQI&callback=initMap">
</script>
</body>
</html>
推荐答案
您的代码中有错别字。查看JavaScript控制台：
You have typos in your code. Look at the javascript console:
-
未捕获的TypeError ：（中间值）不是构造函数
（在此行上额外添加new：var end = new new google.maps.LatLng（37.3229978，-122.0321823）; ） -
InvalidValueError：setMap：不是Map的实例；而不是StreetViewPanorama的实例
（地图是initMap函数的本地实例，则需要将其传递给calcRoute或全局变量） -
未捕获的ReferenceError：directionService未定义
（此行的键入：var directionService = new google.maps.DirectionsService（）;，应为directionsService，而不是directionService`）
Uncaught TypeError: (intermediate value) is not a constructor
(extranewon this line:var end = new new google.maps.LatLng(37.3229978, -122.0321823);)InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama
(mapis local to theinitMapfunction, needs to be passed intocalcRouteor a global)Uncaught ReferenceError: directionsService is not defined
(typo on this line:var directionService = new google.maps.DirectionsService();, should bedirectionsService, not directionService`)
然后它起作用了：
代码段：
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initMap() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 7,
center: chicago
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
calcRoute(map);
}
function calcRoute(map) {
var start = new google.maps.LatLng(41.850033, -87.6500523);
var end = new google.maps.LatLng(37.3229978, -122.0321823);
var request = {
origin: start,
destination: end,
travelMode: 'DRIVING'
};
directionsService.route(request, function(response, status) {
if (status == 'OK') {
directionsDisplay.setDirections(response);
} else {
alert("directions request failed, status=" + status)
}
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
这篇关于如何使用Google Maps API创建路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
