未捕获的类型错误：在 Initialize() 上添加 GetJson 时无法读取未定义的属性“__e3_”

Question

我是谷歌地图的新手，我有一个错误Uncaught TypeError: Cannot read property '__e3_' of undefined 谁能告诉我我的代码有什么问题。 .

错误指向

google.maps.event.addListener(map, 'dragend', function () {
                if (strictBounds.contains(map.getCenter())) return;

和

window.onload = function () {
            initialize();
            codeAddress();
        }

这是我 Initialize() 中的代码

var geocoder, infoBubble;
        var map;
        //var mgr;

        function initialize() {
            var minZoomLevel = 4;
            var zooms = 7;
            geocoder = new google.maps.Geocoder();
            $.getJSON('/Dashboard/LoadAddress', function Geocode(address) {
                $.each(address, function () {
                    var currValAddress = this["AddressLine1"];
                    geocoder.geocode({ 'address': currValAddress }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                          map = new google.maps.Map(document.getElementById('map'), {
                                zoom: minZoomLevel,
                                center: currValAddress,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            })
                        }
                        else {
                            alert("Geocode was not successful for the following reason: " + status);
                        }
                    })
                });
            });

            // Bounds for North America
            var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(15.70, -160.50),
     new google.maps.LatLng(68.85, -55.90)
   );

            // Listen for the dragend event
            google.maps.event.addListener(map, 'dragend', function () {
                if (strictBounds.contains(map.getCenter())) return;

                // We're out of bounds - Move the map back within the bounds

                var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

                if (x < minX) x = minX;
                if (x > maxX) x = maxX;
                if (y < minY) y = minY;
                if (y > maxY) y = maxY;

                map.setCenter(new google.maps.LatLng(y, x));
            });

            // Limit the zoom level
            google.maps.event.addListener(map, 'zoom_changed', function () {
                if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
            });


        }

Answer 1

地理编码和 getJSON 调用一样是异步的。您在定义和初始化 map 变量之前就开始使用它。

发生了什么：

1. 您的代码向服务器发出 JSON 请求
2. 您的代码设置了地图拖动事件监听器（地图未定义）
3. 服务器返回 JSON 结果，并执行所有地理编码器调用
4. 从 google 服务器返回地理编码结果并初始化地图。

5. 额外的地理编码器结果从服务器返回，每个都重新创建并重新初始化地图

   var geocoder, infoBubble;
   var map;
   //var mgr;
   
   function initialize() {
       var minZoomLevel = 4;
       var zooms = 7;
       geocoder = new google.maps.Geocoder();
       $.getJSON('/Dashboard/LoadAddress', function Geocode(address) {
   
           // ??? do you really want to create a new map for each address?
           $.each(address, function () {
               var currValAddress = this["AddressLine1"];
               geocoder.geocode({ 'address': currValAddress }, function (results, status) {
                 if (status == google.maps.GeocoderStatus.OK) {
                   map = new google.maps.Map(document.getElementById('map'), {
                         zoom: minZoomLevel,
                         center: currValAddress,
                         mapTypeId: google.maps.MapTypeId.ROADMAP
                   })
   
                   // Bounds for North America
                   var strictBounds = new google.maps.LatLngBounds(
                     new google.maps.LatLng(15.70, -160.50),
                     new google.maps.LatLng(68.85, -55.90)
                   );
   
                   // Listen for the dragend event
                   google.maps.event.addListener(map, 'dragend', function () {
                     if (strictBounds.contains(map.getCenter())) return;
                     // We're out of bounds - Move the map back within the bounds
   
                     var c = map.getCenter(),
   
                     x = c.lng(),
                     y = c.lat(),
                     maxX = strictBounds.getNorthEast().lng(),
                     maxY = strictBounds.getNorthEast().lat(),
                     minX = strictBounds.getSouthWest().lng(),
                     minY = strictBounds.getSouthWest().lat();
   
                     if (x < minX) x = minX;
                     if (x > maxX) x = maxX;
                     if (y < minY) y = minY;
                     if (y > maxY) y = maxY;
   
                     map.setCenter(new google.maps.LatLng(y, x));
                   });
   
                   // Limit the zoom level
                   google.maps.event.addListener(map, 'zoom_changed', function () {
                     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
                   });
   
                 }
                 else {
                   alert("Geocode was not successful for the following reason: " + status);
                 }
               })
           });
       });
   }