简单点击事件谷歌地图

Simple click event google map

本文关键字:谷歌地图 事件 简单      更新时间:2023-09-26

我正试图将此点击事件包含到我现有的谷歌地图中(请参阅下面的代码)。当标记上发生点击事件时,我需要它来缩放地图。它当前正在缩放,但缩放到地图的另一部分?也许是因为我在同一张地图上有多个标记?

编辑:我制作了一个代码笔在这里演示

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();
});
  1. 删除映射的center_changed-侦听器(此侦听器将始终将映射集中在同一位置)
  2. infowindowdisableAutoPan-选项设置为true(以避免打开信息窗口时内置的地图平移)
  3. 在点击监听器中设置映射的centerzoom

    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));