2

我正在使用 Google Maps Javascript API ver3 来显示世界位置。以下是我正在使用的示例代码：

<!DOCTYPE html> 
<html>
   <head>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
     <style type="text/css">
       html { height: 100% }
       body { height: 100%; margin: 0; padding: 0 }
       #map_canvas { height: 100% }
     </style>
     <script type="text/javascript"       src="http://maps.googleapis.com/maps/api/js?sensor=true">
     </script>
     <script type="text/javascript">
        function addMarkers(location,locationDetail,map){

            var color = "#000000"

            if(locationDetail[1]=="A"){
                color = "#FF0000";
                scl = 3;
            }
            else if(locationDetail[1]=="B"){
                color = "#0000FF"
                scl = 4;
            }
            else if(locationDetail[1]=="C"){
                color = "#00FF00"
                scl = 5;
            }

            var marker = new google.maps.Marker({
                position: location,
                title: locationDetail[0],
                icon: { 
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: scl,
                    fillColor: color,
                    fillOpacity:1,
                    strokeWeight:1
                }
            });


            // To add the marker to the map, call setMap();
            marker.setMap(map); 

    }
       function initialize() {

        //Marking Latitude and Longitude
        var myLatlng = [
                new google.maps.LatLng(24.466667,54.366667),
new google.maps.LatLng(-34.4,-58.24),
new google.maps.LatLng(-33.8641,151.0823)

                   ];
        var myLatlngDet = [
["Abu Dhabi","A"],
["Buenos Aires","B"],
["HOMEBUSH","C"]        
                  ];

        //Map Options to customize map
            var mapOptions = {
            zoom:2,
        center: new google.maps.LatLng(40,0),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapMaker: true,
        minZoom : 2,
        scrollwheel: false,
        mapTypeControl:true,
        mapTypeControlOptions: { 
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        scaleControl:true,
        scaleControlOptions: { 
            position: google.maps.ControlPosition.TOP_LEFT
        },
        streetViewControl:true,
        streetViewControlOptions: {
                position: google.maps.ControlPosition.LEFT_TOP     
        }, 
        overviewMapControl:false,
        zoomControl:true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.LEFT_CENTER
        },
        panControl:true,
        panControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT 
        }
         };

     //Generating map in the div
         var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);


    for(i=0; i < myLatlng.length; i++){

        addMarkers(myLatlng[i],myLatlngDet[i],map);
    }

       }     
      </script>
   </head>

   <body onload="initialize()">
     <div id="map_canvas" style="height: 100%; width: 80%;">
     </div>   
   </body> 
</html>

问题是 - 有时标记会正确显示，但有时我会收到一个 javascript 错误，如下所示：

'对方法或属性访问的意外调用' main.js

你能帮我找出问题的原因吗？

我正在使用 IE8。

提前致谢

4

1 回答 1

1

我的猜测是身体的 onload 并没有等到 googlemap 的脚本被加载。理论上，body 可以比 googlemap 脚本加载得更快（相关讨论）。试着放

window.onload=initialize;

在脚本的底部，而不是使用正文的 onload，看看这是否解决了您的问题。我很难重现这一点。

更新 您应该等到 googlemap 加载完毕，然后再加载窗口。看看这个问题：如何检查谷歌地图是否已满载？

于 2013-03-05T08:13:32.713 回答