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

私の推測では、googlemap のスクリプトがロードされるまで待っていないのは、body の onload です。理論的には、本文は googlemap スクリプトよりも高速にロードできます (関連する議論)。入れてみて

window.onload=initialize;

body の onload を使用する代わりにスクリプトの一番下で、これで問題が解決するかどうかを確認してください。これを再現するのに苦労しています。

更新 ウィンドウの読み込み後に続くgooglemapが読み込まれるまで待つ必要があります。この質問を見てください: Google マップが完全に読み込まれているかどうかを確認するにはどうすればよいですか?

于 2013-03-05T08:13:32.713 に答える