关于javascript:如何在google地图中添加带有点击事件的多个标记?

how can we add multiple marker with click event in google map?

本问题已经有最佳答案,请猛点这里访问。

我正在使用下面的代码,但我很少与click事件混淆。 如何,我可以在每个标记上添加点击事件吗?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
        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++;
     }

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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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++;
 }