我正试图将此点击事件包含到我现有的谷歌地图中(请参阅下面的代码)。当标记上发生点击事件时,我需要它来缩放地图。它当前正在缩放,但缩放到地图的另一部分?也许是因为我在同一张地图上有多个标记?
编辑:我制作了一个代码笔在这里演示
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();
});
- 删除映射的
center_changed
-侦听器(此侦听器将始终将映射集中在同一位置) - 将
infowindow
的disableAutoPan
-选项设置为true
(以避免打开信息窗口时内置的地图平移) -
在点击监听器中设置映射的
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));