谷歌地图点击事件不适用于点击标记

Question

经过长时间的研究，我无法让 Google Maps on Click 事件正常工作。

这是我的代码；

        function initialize_<?= $id; ?>() {
        google.maps.visualRefresh = true;

        var bounds = new google.maps.LatLngBounds();
        var infowindow = new google.maps.InfoWindow({
            content: '<h1>Test window</h1>'
        });

        var lat = <?php echo $lat ; ?>;
        var lng = <?php echo $lng ; ?>;
        var marker = new Array();

        var options = {
            zoom: 13,
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP
            },
            disableDoubleClickZoom: false,
            draggable: true,
            scrollwheel: false,
            mapTypeControl: true,
            mapTypeControlOptions: {
                position: google.maps.ControlPosition.LEFT_BOTTOM
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        if(lat && lng) {
            var lat_lng = new google.maps.LatLng(lat, lng);
            options.center = lat_lng;
        }

        var map = new google.maps.Map(document.getElementById('<?= $id; ?>'), options);

        <?php
        $markerIcon = get_field('marker_icon', 'option');
        if($markerIcon) :
        ?>
        var markerIcon = {
            url: '<?= $markerIcon['url']; ?>',
            size: new google.maps.Size(30, 40),
            scaledSize: new google.maps.Size(30, 40),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(15, 40)
        };
        <?php endif; ?>

        if(lat_lng) {
            var marker = new google.maps.Marker({
                position: lat_lng,
                icon: (markerIcon ? markerIcon : '')
            });

            marker.setMap(map);
        } else if(locations.length) {
            var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            var bounds = new google.maps.LatLngBounds();
            var markers = locations.map(function(location, i) {
                var position = new google.maps.LatLng(location[0], location[1]);
                bounds.extend(position);
                var shape = {
                    coords: [],
                    type: 'poly'
                };

                var marker = new google.maps.Marker({
                    position: position,
                    icon: (markerIcon ? markerIcon : ''),
                    shape: shape,
                    label: labels[i % labels.length]
                });


                google.maps.event.addListener(marker, 'click', function() {
                    console.log('test');
                });

                return marker;
            });

            const markerClusterIcon = color => window.btoa(`
                <svg fill="${color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
                    <circle cx="120" cy="120" opacity="1" r="100" />
                </svg>`);

            new MarkerClusterer(map, markers, {
                styles: [`black`].map(color => ({
                url: `data:image/svg+xml;base64,${markerClusterIcon(color)}`,
                height: 40,
                width: 40,
                textColor: `white`,
                fontFamily: `'Playfair Display', serif`,
                textSize: 16
                })),
            });

            map.fitBounds(bounds);
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize_<?= $id; ?>);

我尝试了很多东西。现在我已经为点击设置了一个控制台日志，但它不起作用。有谁知道问题出在哪里？

我正在映射位置变量，在该函数中，我决定为点击事件添加一个监听器。

感谢您的帮助！

Answer 1

我从标记变量中删除了shape: shape,，现在信息窗口出现了。