Question

我很尴尬地问这个问题，因为我确信这是一件非常简单的事情，我不知道。

我在互联网上看到了几个这样的问题，但我似乎无法用这些答案来解决我的问题。我看过看起来与我的非常相似的教程和代码，但由于某些原因我收到了错误，而堆栈跟踪根本没有帮助。

我的HTML：

<!DOCTYPE html>
<html>

  <head>
    <link href="style.css" rel="stylesheet">

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=name-changed-to-protect-the-innocent">
    </script>

    <script type="text/javascript" src="directions.js"></script>

  </head>

  <body>
    <section id="map"></section>
  </body>
</html>

我的javascript：

function initialize() {

  var map, service;

  // Create the Google Map
  createMap();
  getRoute();


  function createMap() {

    // Set mapOptions
    var mapOptions = {
      center: { lat: 37.388769, lng: -122.158954 },
      zoom: 15
    };

    // Create map with options
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
  }

  function getRoute() {
    var orig = { lat: 37.388769, lng: -122.158954 };
    var dest = { lat: 37.391979, lng: -122.167891 };

    var routeOptions = {
      origin: orig,
      destination: dest,
      travelMode: google.maps.TravelMode.DRIVING
    };

    service = new google.maps.DirectionsService();

    service.route(routeOptions, handleDirections);
  }

  function handleDirections(result, status) {
    if ( status == google.maps.DirectionsStatus.OK ) {
      console.log("this worked");
    }
    else {
      console.log("this didn't work");
    }
  }

}

google.maps.event.addDomListener(window, 'load', initialize);

加载页面时控制台中出现错误：

Uncaught TypeError: number is not a function   VM2966:64
 KJ                          VM2970:2
 taa                         VM2970:9
 yaa                         VM2970:7
 xaa                         VM2970:10
 (anonymous function)        main.js:26
 Wf                          VM2970:10
 u1.(anonymous function).Sj  main.js:37
 (anonymous function)        main.js:26
 Xf                          VM2970:54
 (anonymous function)        VM2966:31
 vh.util                     main.js:37
 (anonymous function)        main.js:25
 (anonymous function)        main.js:25
 (anonymous function)        main.js:25
 (anonymous function)        main.js:26
 Qf                          main.js:25
 Mf.(anonymous function).D   directions.js:1

Answer 1

问题在于

 var orig = { lat: 37.388769, lng: -122.158954 };
 var dest = { lat: 37.391979, lng: -122.167891 };

不是google.maps.LatLng个对象。

通过此更改行：

var orig = new google.maps.LatLng(37.388769, -122.158954);
var dest = new google.maps.LatLng(37.391979, -122.167891);

查看以下示例：

<!DOCTYPE html>
<html>
    <head>
        <title>Directions Exemple</title>

    </head>

<body>

    <div id="map" style="width:500px;height: 500px;"></div>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
            function initialize() {

                var map, service;

                // Create the Google Map
                createMap();
                getRoute();


                function createMap() {

                    // Set mapOptions
                    var mapOptions = {
                        center: { lat: 37.388769, lng: -122.158954 },
                        zoom: 15
                    };

                    // Create map with options
                    map = new google.maps.Map(document.getElementById('map'), mapOptions);
                }

                function getRoute() {
                    var orig = new google.maps.LatLng(37.388769, -122.158954);
                    var dest = new google.maps.LatLng(37.391979, -122.167891);

                    var routeOptions = {
                        origin: orig,
                        destination: dest,
                        travelMode: google.maps.TravelMode.DRIVING
                    };

                    service = new google.maps.DirectionsService();

                    service.route(routeOptions, handleDirections);
                }

                function handleDirections(result, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        console.log("this worked");
                    } else {
                        console.log("this didn't work");
                    }
                }

            }

            google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</body>
</html>

TypeError：Number不是函数 - 尝试使用Google Maps API V3 DirectionsService时

1 个答案: