0

こんにちは、Google マップで新しいプロジェクトを開始しました。私は JavaScript と Google Maps API の両方の初心者です。

更新: 私がやろうとしているのは、異なるコンテンツを持つ各マーカーに informationWindow を追加することです。そのため、マーカーをクリックすると、その特定のマーカーのコンテンツがポップアップ表示されます。

現在、4 番目の要素のみがポップアップ表示されます。すべてのマーカーに情報がポップアップ表示されるようにする必要があります。

これを行う他の方法はありますか？

前もって感謝します、

更新しました：

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title>
    <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>    


     var myLatlng = new google.maps.LatLng(53.014783, -95.097656);

     var iterator = 0;

     var neighborhoods = new Array(
         new Array("test1","49.165206","-122.665443"),
         new Array("test2","49.14476","-121.98544"),
         new Array("test3","49.162063","-122.667675"),
         new Array("test4","48.455005","-123.54155"),
         new Array("test5","51.038156","-114.035339") 
     );

     var markers = [];

     function initialize()
     {        
        var mapOptions = {
           zoom: 4,
           center: myLatlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);               


         /*for (var i = 0; i < neighborhoods.length; i++)
         {
             markers[iterator] = new google.maps.Marker(
                 {
                     position: neighborhoods[iterator],
                     map: map,
                     title: 'Hello World!'
                 }
             );        
             iterator++;
         };*/


        var infowindow = new google.maps.InfoWindow({

        });         

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

            var marker = new google.maps.Marker(
                 {
                     position: new google.maps.LatLng(neighborhoods[i][1], neighborhoods[i][2]),
                     map: map,
                     title: neighborhoods[i][0]
                 }
             );

            var test = neighborhoods[i][0];

            google.maps.event.addListener(marker, 'click', function(e) {
                infowindow.open(map,marker);                
                infowindow.setContent(test);
            });
        } 

     };   


    </script>
  </head>
  <body onload="initialize();">
    <div id="map_canvas" style="width: 1000px; height: 700px;">map div</div>
    <!--button id="drop" onclick="drop()">Drop Markers</button-->
  </body>
</html>
4

2 に答える 2

1

これは、Mike Williams の Google Maps API (v2) チュートリアルから Google Maps API v3 に移植した例です。これには、一意の情報ウィンドウを持つ複数のマーカーがあり、関数クロージャーを使用して情報ウィンドウのコンテンツをマーカーに関連付けています。

于 2012-08-18T21:52:37.127 に答える
0

最終版は次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title>
    <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>    


     var myLatlng = new google.maps.LatLng(53.014783, -95.097656);

     var iterator = 0;

     var neighborhoods = new Array(
         new Array("test1","49.165206","-122.665443"),
         new Array("test2","49.14476","-121.98544"),
         new Array("test3","49.162063","-122.667675"),
         new Array("test4","48.455005","-123.54155"),
         new Array("test5","51.038156","-114.035339") 
     );

     var markers = [];

     function initialize()
     {        
        var mapOptions = {
           zoom: 4,
           center: myLatlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);               

        infowindow = new google.maps.InfoWindow({

        }); 


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

            var marker = new google.maps.Marker(
                 {
                     position: new google.maps.LatLng(neighborhoods[i][1], neighborhoods[i][2]),
                     map: map,
                     title: neighborhoods[i][0],
                     html: neighborhoods[i][0],
                     animation: google.maps.Animation.DROP
                 }
             );

            google.maps.event.addListener(marker, 'click', function(e) {
                infowindow.setContent(this.html);
                infowindow.open(map,this);                              
            });
        } 

     };   


    </script>
  </head>
  <body onload="initialize();">
    <div id="map_canvas" style="width: 1000px; height: 700px;">map div</div>    
  </body>
</html>
于 2012-08-20T16:41:14.923 に答える