0

嘿伙计们，我刚刚用谷歌地图开始了一个新项目。我是 javascript 和 google maps API 的新手。

更新：我要做的是为每个具有不同内容的标记添加一个信息窗口。因此，当单击标记时，会弹出该特定标记的内容。

现在只弹出第 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 回答