我们如何在谷歌地图中添加多个带有点击事件的标记?

时间:2014-08-07 19:46:53

标签: javascript jquery google-maps google-maps-api-3 google-maps-markers

我正在使用以下代码,但我对点击事件感到困惑。如何,我可以在每个标记上添加点击事件吗?

        var address = 'Dubai';
     var neighborhoods = [
       new google.maps.LatLng(25.23247465817403, 55.30191340351564),
       new google.maps.LatLng(25.244586082480332, 55.29822268391115),
       new google.maps.LatLng(25.230844181976337, 55.32225527668459),
       new google.maps.LatLng(25.224787936110832, 55.28526224995119)
     ];
     var markers = [];
     var iterator = 0;
     var map;
     var geocoder = new google.maps.Geocoder();
     function initialize() {
         var mapOptions = {
             zoom: 12,
         };
         map = new google.maps.Map(document.getElementById('mapCanvas'),
                 mapOptions);
         geocoder.geocode({
             'address': address
         },
         function (results, status) {
             if (status == google.maps.GeocoderStatus.OK) {
                 map.setCenter(results[0].geometry.location);
             }
         });
     }
     function drop() {
         for (var i = 0; i < neighborhoods.length; i++) {
             setTimeout(function () {
                 addMarker();
             }, i * 200);
         }
     }
     function addMarker() {
         var image = 'img/flagred.png';
         markers.push(new google.maps.Marker({
             position: neighborhoods[iterator],
             map: map,
             icon: image,
             title:"Hello World!",
             draggable: false,
             animation: google.maps.Animation.DROP
         }));
         iterator++;
     }

我在这里查看了其他答案,但这并没有解决我的问题。

1 个答案:

答案 0 :(得分:5)

只需将其添加到您添加到地图的每个标记中即可。因此,将addMarker-definition更改为

function addMarker() {
     var image = 'img/flagred.png';
     var marker = new google.maps.Marker({
         position: neighborhoods[iterator],
         map: map,
         icon: image,
         title:"Hello World!",
         draggable: false,
         animation: google.maps.Animation.DROP
     });
     markers.push(marker);

     google.maps.event.addListener(marker, 'click', function() {
         // your magic goes here
     });

     iterator++;
 }