如何使用 Google Maps API 创建路线答案

【问题标题】：How to create a route using Google Maps API如何使用 Google Maps API 创建路线
【发布时间】：2017-08-06 22:06:49
【问题描述】：

我正在尝试在两个地方之间创建一条路线，在 html 文件中明确指出。我试图尽可能地复制谷歌文档，但它似乎不起作用。

这是我的代码：

<!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 google-maps routes

【解决方案1】：

您的代码中有拼写错误。查看javascript控制台：

Uncaught TypeError: (intermediate value) is not a constructor
（此行额外的new：var end = new new google.maps.LatLng(37.3229978, -122.0321823);）
InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama
（map 是 initMap 函数的局部变量，需要传入 calcRoute 或全局函数）
Uncaught ReferenceError: directionsService is not defined
（此行的错字：var directionService = new google.maps.DirectionsService();，应该是directionsService，而不是directionService`）

然后就可以了：

proof of concept fiddle

代码 sn-p：

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>

【讨论】：