嘗試訪問嵌入的Google地圖時，為什么會出現無法讀取未定義的屬性“ getCenter”的問題？

Question

這就是我在頁面上構造Google地圖的方式：

var initialize = function(latitude, longitude, boundaries) {

            // Uses the selected lat, long as starting point
            var myLatLng = {lat: selectedLat, lng: selectedLong};

            // If map has not been created...
            if (!map){
                // Create a new map and place in the index.html page
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 12,
                    center: myLatLng
                });
            }

            if(boundaries.length > 0){
                //we don't have a permission for using real GPS of the user
                var bounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(boundaries[0], boundaries[1]),
                    new google.maps.LatLng(boundaries[2], boundaries[3]) );

                map.fitBounds(bounds);
            }else{
                //we have a permission, let's mark his location with a marker
                // Set initial location as a bouncing red marker
                var initialLocation = new google.maps.LatLng(latitude, longitude);

                var marker = new google.maps.Marker({
                    position: initialLocation,
                    animation: google.maps.Animation.BOUNCE,
                    map: map,
                    icon: 'http://www.google.com/mapfiles/dd-start.png'//'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
                });
                //lastMarker = marker;

            }


            refreshDataOnMap(longitude, latitude, map);

如您所見，我嘗試將創建的地圖傳遞給refreshDataOnMap方法：

   var refreshDataOnMap = function(long, lat, mymap) {

        console.log("refresh!!");
        var calculatedDistance = calculateRadiusInMiles(mymap);
   }

並且此方法調用calculateRadiusInMiles ：

// get the viewable map radius
        var calculateRadiusInMiles = function(map){

            var bounds = map.getBounds();

            var center = bounds.getCenter();
            var ne = bounds.getNorthEast();

            // r = radius of the earth in statute miles
            var r = 3963.0;

            // Convert lat or lng from decimal degrees into radians (divide by 57.2958)
            var lat1 = center.lat() / 57.2958;
            var lon1 = center.lng() / 57.2958;
            var lat2 = ne.lat() / 57.2958;
            var lon2 = ne.lng() / 57.2958;

            // distance = circle radius from center to Northeast corner of bounds
            var dis = r * Math.acos(Math.sin(lat1) * Math.sin(lat2) +
                    Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1));
            return dis;
        };

我的控制台中的結果顯示：

刷新！

angular.js：12520 TypeError：無法在Object.googleMapService.refresh（gservice）的initialize（gservice.js：214）的refreshDataOnMap（gservice.js：48）的calculateRadiusInMiles（gservice.js：112）處讀取未定義的屬性'getCenter' .js：36）。 （gservice.js：225），位於Object.invoke（angular.js：4523），位於Object.enforcedReturnValue [as $ get]（angular.js：4375），位於Object.invoke（angular.js：4523），位於angular.js： 4340 at getService（angular.js：4482）（匿名函數）@ angular.js：12520（匿名函數）@ angular.js：9292Scope。$ apply @ angular.js：16157bootstrapApply @ angular.js：1679invoke @ angular.js： 4523doBootstrap @ angular.js：1677bootstrap @ angular.js：1697angularInit @ angular.js：1591（匿名函數）@ angular.js：29013fire @ jquery.js：3182self.fireWith @ jquery.js：3312jQuery.extend.ready @ jquery。 js：3531完成@ jquery.js：3547

刷新！

因此我無法正確使用頁面上的地圖。 我不知道這里可能出了什么問題，對我來說，在嘗試調用地圖的屬性后，它看起來就像是加載了地圖，但是-如果正確的話-我該如何避免呢？

謝謝

編輯===========

這里有一個細節，因為調試該問題可能有用：

我加載谷歌地圖，並根據用戶IP地址將其居中，但是當瀏覽器檢測到GPS數據時，地圖將重新加載並指向特定的GPS點。 這就是為什么在我的console.log中可以看到refresh!!! 兩次

Answer 1

bounds必須是未定義的，因此map尚未生效。 您是否在將map傳遞給calculateRadiusInMiles()時檢查過它？ 你檢查bounds嗎？ 地圖已經加載了嗎？

Google Maps Api v3-getBounds未定義

編輯以湯匙進料：

看來v3中確實有一個事件是這樣的：

`google.maps.event.addListener(map, 'bounds_changed', function() {
     alert(map.getBounds());
});

要么

`google.maps.event.addListener(map, 'idle', function() {
     alert(map.getBounds());
});