Question

我正在使用Google Maps API，并且已经使用此SO answer作为参考来实现了自定义圈子，效果很好。

以下是我到目前为止的截图。

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

现在我也使用了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 Maps API-自定义圈子onclick事件未触发

1 个答案: