问Google Maps - Array
EN

Stack Overflow用户

提问于 2012-08-17 21:45:21

回答 2查看 1.2K关注 0票数 0

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

更新:我正在尝试做的是为每个标记添加一个不同内容的informationWindow。因此，当单击该标记时，将弹出该特定标记的内容。

现在只有第四个元素弹出。我需要让每个标记弹出信息。

有没有其他方法可以做到这一点？

提前谢谢你，

更新：

 <!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>

javascript

arrays

google-maps-api-3

语音识别特惠，低至14.9元！

提供业界非常具有性价比的语音识别服务，超高识别准确率，适用多场景

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-08-18 21:52:37

我从Mike Williams的Google Maps API (v2)教程移植到Google Maps API v3的Here is an example，它有多个具有唯一信息窗口的标记，它使用函数闭包将信息窗口内容与标记关联起来。

票数 1

Stack Overflow用户

发布于 2012-08-20 16:41:15

最终版本是：

<!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>