javascript - 简单的点击事件谷歌地图

Question

我正在尝试包含 this点击事件到我现有的谷歌地图(参见下面的代码)。当标记上发生单击事件时，我需要它来缩放 map 。它当前缩放但缩放到 map 的不同部分？也许是因为我在同一张 map 上有多个标记？

编辑:我制作了一个 codepen 来演示 here

var locations = [
    ['Aberdar / Aberdare', 51.710501, -3.442823, 1],
    ['Bangor', 53.208431, -4.185703, 2],
    ['Caerdydd', 51.464783, -3.163191, 3],
    ['Llangefni', 53.290704, -4.503386, 4],
    ['Caerfyrddin', 51.858370, -4.328699, 5],
    ['Dinbych / Denbigh', 53.193235, -3.414290, 6],
    ['Llanuwchllyn', 52.871170, -3.662876, 7],
    ['Llangrannog', 52.162539, -4.447742, 8],
    ['Y Drenewydd / Newtown', 52.512730, -3.312657, 9],
    ['Abertawe / Swansea', 51.651185, -3.959457, 10],
    ['Pentre Ifan', 52.008379, -4.779861, 11],
    ['Yr Wyddgrug/ Mold', 53.178779, -3.118454, 12]
];

function initialize() {

    var latlng = new google.maps.LatLng(52.407118, -2.929305);

    var styles = [
        {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#a2daf2"
                }
            ]
        },
        {
            "featureType": "landscape.man_made",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#f7f1df"
                }
            ]
        },
        {
            "featureType": "landscape.natural",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#d0e3b4"
                }
            ]
        },
        {
            "featureType": "landscape.natural.terrain",
            "elementType": "geometry",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "poi.park",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#bde6ab"
                }
            ]
        },
        {
            "featureType": "poi",
            "elementType": "labels",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "poi.medical",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#fbd3da"
                }
            ]
        },
        {
            "featureType": "poi.business",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "road",
            "elementType": "geometry.stroke",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "road",
            "elementType": "labels",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "road.highway",
            "elementType": "geometry.fill",
            "stylers": [
                {
                    "color": "#ffe15f"
                }
            ]
        },
        {
            "featureType": "road.highway",
            "elementType": "geometry.stroke",
            "stylers": [
                {
                    "color": "#efd151"
                }
            ]
        },
        {
            "featureType": "road.arterial",
            "elementType": "geometry.fill",
            "stylers": [
                {
                    "color": "#ffffff"
                }
            ]
        },
        {
            "featureType": "road.local",
            "elementType": "geometry.fill",
            "stylers": [
                {
                    "color": "black"
                }
            ]
        },
        {
            "featureType": "transit.station.airport",
            "elementType": "geometry.fill",
            "stylers": [
                {
                    "color": "#cfb2db"
                }
            ]
        }
    ];

    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: 'Styled',
        mapTypeControl: false,
        scrollwheel: false,
        streetViewControl: false,
        zoomControl: true,
        scaleControl: false,
        draggable: true,
        mapTypeControlOptions: {
            mapTypeIds: [ 'Styled']
        }

    };
    var map = new google.maps.Map(document.getElementById("map"),
        myOptions);

    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
    map.mapTypes.set('Styled', styledMapType);

    setMarkers(map,locations);

    $(window).resize( function() { map.setCenter(latlng) });

}

function setMarkers(map,locations){

    var marker, i

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

        var loan        = locations[i][0];
        var lat         = locations[i][3];
        var long        = locations[i][2];
        var marker_num  = locations[i][3];

        var map_marker = new google.maps.MarkerImage('<?php echo $this->getThemePath(); ?>/images/global/map-marker-'+marker_num+'.png',
            new google.maps.Size(22,33),
            new google.maps.Point(0,0)
        );

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({  
            map: map, 
            title: loan, 
            position: latlngset,
            icon: map_marker
        });

        var content = "<h3 class=\"mapHeading\">" + loan +  "</h3>";     

        var infowindow = new google.maps.InfoWindow();

        google.maps.event.addListener(map, 'center_changed', function() {
            // 3 seconds after the center of the map has changed, pan back to the
            // marker.
            window.setTimeout(function() {
              map.panTo(marker.getPosition());
            }, 3000);
        });

        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
                return function() {
                    infowindow.setContent(content);
                    infowindow.open(map,marker);
                    map.setZoom(14);
                    map.setCenter(marker.getPosition());
                };
            })(marker,content,infowindow)); 

    }
}

$(function() {
    initialize();
});

Answer 1

1. 删除 map 的 center_changed 监听器(此监听器始终将 map 居中于同一位置)
2. 将 infowindow 的 disableAutoPan 选项设置为 true(以避免信息窗口打开时内置的 map 平移)

3. 在点击监听器中设置 map 的center和zoom:

   google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
               return function() {
                   infowindow.setContent(content);
                   infowindow.open(map,marker);
                   map.setOptions({zoom:14,center:marker.getPosition()});
               };
           })(marker,content,infowindow));