TypeError：數字不是函數 - 嘗試使用Google Maps API V3 DirectionsService

我很尷尬地問這個問題，因爲我確信這是超級簡單的東西，我錯過了。TypeError：數字不是函數 - 嘗試使用Google Maps API V3 DirectionsService

我在interwebs上看到過幾個這樣的問題，但我似乎無法使用這些答案來解決我的問題。我看過的教程和代碼與我的看起來非常相似，但出於某種原因，我得到一個錯誤，堆棧跟蹤根本沒有幫助。

我的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

來源

2014-12-04 Raj

的問題是，

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>

來源

2014-12-04 09:28:44 sabotero

真的嗎？我的印象是（基於這個文檔https://developers.google.com/maps/documentation/javascript/reference#LatLng），任何LatLng對象都可以用LatLng文字替代，這是我使用的散列表示。這是不正確的？ – Raj 2014-12-04 09:42:52

不，它不是。正如你所看到的，構造器是'LatLng'，你可以傳遞'latitude'和'longitude'以及一個可選的'noWrap'布爾值。 'LatLng（lat：number，lng：number，noWrap？：boolean）'lat：number'和'lng：number'就是指示需要的參數和順序 – sabotero 2014-12-04 09:45:36

嗯，你絕對是對的關於那個。在使用對象而不是文字後工作得很好。我的後續問題是，我該如何知道哪些API支持對象字面值與LatLng對象，其次，我怎麼從錯誤消息中知道LatLng對象是問題的根源？ – Raj 2014-12-04 09:45:50

TypeError：數字不是函數 - 嘗試使用Google Maps API V3 DirectionsService

回答

相關問題