如何使用谷歌地图API创建一个路线[英] How to create a route using Google Maps API

本文是小编为大家收集整理的关于如何使用谷歌地图API创建一个路线的处理方法,想解了如何使用谷歌地图API创建一个路线的问题怎么解决?如何使用谷歌地图API创建一个路线问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我正在尝试在两个地方之间创建一条路线,在 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控制台:

  • 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`)

然后就可以了:

概念证明小提琴

代码片段:

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>

本文地址:https://www.itbaoku.cn/post/1793746.html