未捕獲的錯誤：未為Google Map API Geocoder定義google

Question

嘿，我目前正在使用Google API將地圖渲染到我的應用程序中； 但是，我遇到了一個問題，即我正在使用Google的地理編碼庫，但是卻遇到了未捕獲的錯誤：未定義google。

我不明白此錯誤，因為我使用它來呈現地圖本身，並且正在讀取google對象並正確呈現地圖。

這是我的html腳本：

   <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
   <script type="text/javascript" src="js/scripts.js" async></script>
   <script 
      src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap" async defer>
    </script>

這是我的JavaScript文件：

function initMap() {
var geocoder = new google.maps.Geocoder(),
fromLatLng = getLatLng(geocoder, "Pasadena, California"),
startLatLng = getLatLng(geocoder,"Los Angeles, California"),
fromLocation = new google.maps.LatLng(fromLatLng),
destLocation = new google.maps.LatLng(startLatLng),
map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 32.8615616, lng: -117.2188185}, // TODO change to start location
  zoom: 7 // continet level
}),
directionService = new google.maps.DirectionsService(),
directionRender = new google.maps.DirectionsRenderer({
  map: map
}),
markerA = new google.maps.Marker({
  position: fromLocation,
  title: "Point A",
  label: "A",
  map:map
}),
markerB = new google.maps.Marker({
  position: destLocation,
  title: "Point B",
  label:"B",
  map:map
});


console.log(fromLocation)
renderRoute(directionService, directionRender, fromLocation, destLocation);

 } // end of initMap


function getLatLng(geocoder, address) {
 geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
  if(results[0].geometry.location){
    console.log("Successfully Lat/Lng converted");
    return results[0].geometry.location;
  }
  else{
    console.log("Couldn't properly convert");
  }
  } else {
  console.log('Geocode was not successful for the following reason: ' + status);
  }
  });
  }

我嘗試過更改腳本和許多其他stackoverflow帖子，但是還沒有發現任何運氣。

Answer 1

您對地理編碼的使用不正確。
我必須承認這是一個棘手的問題！
我以前從未使用過該服務...我什至不得不啟用它！！

我發現，檢索信息存在延遲 。
是的，畢竟這是一個獲取請求...
然后您執行兩次。

因此，我要做的是設置一個時間間隔，以檢查設置地圖之前是否同時執行了兩個Geocode requests回調，因為需要設置標記。

我在一個名為doGeocode()的新函數中實現了它。
這也是腳本調用中的map API回調，而不是initMap 。

在獲得2個地理編碼的緯度/經度后，此函數最終調用initMap()來呈現所需的結果。

我唯一找不到的是您的renderRoute函數...由於您的問題中未提供。 但我認為您將能夠處理。

所以...在這里查看我服務器上的結果 。

完整代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>SO # 39909383</title>
    <link rel="icon" type="image/gif" href="https://www.bessetteweb.com/cube-fallback/images/sept.gif">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

    <!-- Google Maps CSS-->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">

    <style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100%;
        cursor: pointer !important;
    }
    </style>
    </head>
  <body>
  <div id="map"></div>

  <script>
    var map;
    var fromLocation;
    var destLocation;
    var callbackCounter=0;

    function initMap() {

        console.log("Map initialisation");

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 32.8615616, lng: -117.2188185}, // TODO change to start location
            zoom: 7, // continent level
            mapTypeId: google.maps.MapTypeId.SATELLITE      // TERRAIN, HYBRYD, ROADMAP
        });

        var directionService = new google.maps.DirectionsService();
        var directionRender = new google.maps.DirectionsRenderer({
            map: map
        });

        var markerA = new google.maps.Marker({
            position: fromLocation,
            title: "Point A",
            label: "A",
            map:map
        });

        var markerB = new google.maps.Marker({
            position: destLocation,
            title: "Point B",
            label:"B",
            map:map
        });

        // renderRoute == not a function!!
        // Missing in the question...
        // Temporarly commented out.
        //
        //renderRoute(directionService, directionRender, fromLocation, destLocation);

    } // end of initMap

    function getLatLng(geocoder, address) {
        geocoder.geocode({'address': address}, function(results, status) {

            console.log("callbackCounter: "+callbackCounter);

            if (status === 'OK') {
                if(results[0].geometry.location){
                    console.log("Successfully Lat/Lng converted");

                    // Only to see clearly in console.log()
                    var latlong = JSON.stringify(results[0].geometry.location);
                    console.log( latlong );

                    latlong = JSON.parse(latlong);
                    callbackCounter++;

                    // Set from
                    if(callbackCounter==1){
                        fromLocation = latlong;
                    }

                    // Set dest
                    if(callbackCounter==2){
                        destLocation = latlong;
                    }

                    // Function end.
                    return;
                }
                else{
                    console.log("Couldn't properly convert");
                }
            } else {
                console.log('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    function doGeocode(){
        var geocoder = new google.maps.Geocoder();

        getLatLng(geocoder, "Pasadena, California");
        getLatLng(geocoder,"Los Angeles, California");

        // Wait for from and dest locations found ( Geocoder get delay )
        var waitForCoords = setInterval(function(){
            console.log("--- Interval");

            if(callbackCounter==2){
                clearInterval(waitForCoords);
                console.log("--- Interval cleared");

                // Ready to initialise the map!
                initMap();
            }

        },50);
    }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=doGeocode"></script>

</body>
</html>

未捕獲的錯誤：未為Google Map API Geocoder定義google

問題描述

1 個解決方案

解決方案1
1 已采納 2016-10-10 19:48:08

未捕獲的錯誤：未為Google Map API Geocoder定義google

問題描述

1 個解決方案

解決方案1 1 已采納 2016-10-10 19:48:08

解決方案1
1 已采納 2016-10-10 19:48:08