Google 地图 API - 自定义圆圈 onclick 事件未触发

Question

我正在使用 Google 地图 API 并且我使用这个作为参考实现了自定义圆圈，它工作得非常好。

下面是我到目前为止所做的截图。

正如您在上面看到的，我正在使用地图图标显示我的计数。

现在我也使用了 infobox 所以当我点击地图图标时，它的打开是这样的。

现在我面临的问题是，如果我点击我的计数，它不会打开与我点击我的图标时打开的信息框相同的信息框。

我尝试在我的 for 循环中使用以下代码，但它对我不起作用。

 google.maps.event.addListener(ibLabel, 'click', (function (marker, i) {

                        return function () {
                            infowindow.setContent(locations[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));

这是我到目前为止所做的完整源代码。

 var locations = chartData;
                map = new google.maps.Map(document.getElementById('map-canvas'), {
                    zoom: 4,
                    center: new google.maps.LatLng(-27.4756261, 129.3748879),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                map.setOptions({minZoom: 1, maxZoom: 15});                
                var marker, i;
                var circle;


                var latlng;
                var myLatLng;
                var closeInfoBox = document.getElementById("close-button");


                var infowindow = new google.maps.InfoWindow({maxWidth: 350});
                 var oms = new OverlappingMarkerSpiderfier(map, {
                    //markersWontMove: true, // we promise not to move any markers, allowing optimizations
                 //   markersWontHide: true, // we promise not to change visibility of any markers, allowing optimizations
                  //  basicFormatEvents: true  // allow the library to skip calculating advanced formatting information
                });




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

                    var user_id_array = '<?= $user_id_array; ?>';
                    var image_name = 'ouvar-pin-new.png';
                    var get_user_id = locations[i][4];
                    var fill_color_val = '#154ff6';



                    var latitude = locations[i][1];
                    var lontitude = locations[i][2];

                    myLatLng = google.maps.LatLng(latitude, lontitude);
                    var latlng = new google.maps.LatLng(latitude, lontitude);

                    if (user_id_array != '')
                    {
                        var data = JSON.parse(user_id_array);
                        image_name = data[get_user_id];
                        if(image_name != 'ouvar-pin-new-blue.png'){
                            fill_color_val = '#f24e82';
                        }

                       // alert(image_name);

                    }
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,                     


                    });


                    circle = new google.maps.Circle({
                        map: map,
                        radius: 200000, // 10 miles in metres
                        fillColor: fill_color_val,
                        strokeColor: '#FFFFFF',
                        strokeWeight: 5,
                        fillOpacity: 1,
                    });
                    circle.bindTo('center', marker, 'position');


                    var labelText = locations[i][5];
                    var myOptions = {
                        content: labelText,
                        boxStyle: {
                        border: "none",
                        textAlign: "center",
                        fontSize: "12pt",
                        width: "50px",
                        color:'white',
                        },
                        disableAutoPan: true,
                        pixelOffset: new google.maps.Size(-25,-5),
                        position: latlng,
                        closeBoxURL: "",
                        isHidden: false,
                        pane: "floatPane",
                        enableEventPropagation: true,
                        zIndex: null,
                    };




                    // marker.setVisible(false);

                     var ibLabel = new InfoBox(myOptions);
                        ibLabel.open(map);


                         google.maps.event.addListener(ibLabel, 'click', (function (marker, i) {

                        return function () {
                            infowindow.setContent(locations[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));

                     google.maps.event.addListener(marker, 'click', (function (marker, i) {

                        return function () {
                            infowindow.setContent(locations[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                    google.maps.event.addListener(map, 'click', function () {
                        infowindow.close();
                        marker.open = false;
                    });

                    oms.addMarker(marker);
                      //oms.addMarker(marker);


                }


                  window.map = map;  // for debugging/exploratory use in console
                window.oms = oms;

                google.maps.event.addListener(infowindow, 'domready', function () {

                    var iwOuter = $('.gm-style-iw');

                    var iwBackground = iwOuter.prev();


                    iwBackground.children(':nth-child(2)').css({'display': 'none'});


                    iwBackground.children(':nth-child(4)').css({'display': 'none'});


                    iwBackground.children(':nth-child(1)').attr('style', function (i, s) {
                        return s + 'left: 76px !important;'
                    });




                    iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index': '1'});


                    var iwCloseBtn = iwOuter.next();


                    iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #fff', 'border-radius': '13px', 'padding': '6px', ' box-shadow': '0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2)'});


                    if ($('.iw-content').height() < 140) {
                        $('.iw-bottom-gradient').css({display: 'none'});
                    }


                    iwCloseBtn.mouseout(function () {
                        $(this).css({opacity: '1'});
                    });
                });

谁能指导我如何为我的自定义圈子启用点击事件。

Answer 1

如果你希望当有人点击圆圈时发生一些事情，你需要给它添加一个点击监听器。下面的代码将在单击圆圈时打开与标记上的单击侦听器相同的信息窗口（并将其引用到标记）。

google.maps.event.addListener(circle, 'click', (function(marker, i) {
  return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map, marker);
  }
})(marker, i));

Google 地图 API - 自定义圆圈 onclick 事件未触发

Google Maps API - custom circle onclick event not firing

javascript

google-maps

google-maps-api-3

google-maps-markers