【问题标题】:Why am I getting Cannot read property 'getCenter' of undefined when trying to access my embed google map?为什么在尝试访问我的嵌入谷歌地图时无法读取未定义的属性“getCenter”?
【发布时间】:2016-04-30 23:02:59
【问题描述】:

这就是我在页面上构建谷歌地图的方式:

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: 无法读取属性“getCenter” 不明确的 在 calculateRadiusInMiles (gservice.js:112) 在 refreshDataOnMap (gservice.js:48) 初始化时(gservice.js:214) 在 Object.googleMapService.refresh (gservice.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 在 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:3531completed @ jquery.js:3547

刷新!!

因此我无法正确使用页面上的地图。我不知道这里可能出了什么问题,对我来说,在我尝试调用它的属性之后它看起来像是加载了地图,但是 - 如果这是正确的 - 我该如何防止它?

谢谢

编辑===========

这里有一个细节,因为它可能对调试这个问题很有用:

我加载谷歌地图并根据用户 IP 地址将其居中,但是当浏览器检测到 gps 数据时,地图会重新加载并指向特定的 gps 点。这就是为什么在我的 console.log 中你可以看到 refresh!!! 两次

【问题讨论】:

    标签: javascript angularjs google-maps google-maps-api-3


    【解决方案1】:

    一定是bounds 未定义,所以map (还)无效。当map 传递给calculateRadiusInMiles() 时,您检查了吗?你检查过bounds吗?地图已经加载了吗?

    Google Maps Api v3 - getBounds is undefined

    编辑到勺子喂:

    看起来在 v3 中有一个事件正是为了这个:

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

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

    【讨论】:

    • 感谢您的建议,在我的情况下,地图正在加载过程中,因此尚未加载,因此边界未定义。但是 - 你能给我一个直接的提示如何解决它吗?
    猜你喜欢
    • 2017-04-03
    • 1970-01-01
    • 1970-01-01
    • 2017-11-09
    • 2019-09-01
    • 2021-11-03
    • 1970-01-01
    • 1970-01-01
    • 2018-04-06
    相关资源
    最近更新 更多