Javascript 谷歌地图Api向标记缩放
我有一张带有一些标记和放大/缩小按钮的地图 当我点击按钮时，我会朝地图中心/远离地图中心缩放，如果没有选择标记，这是很好的。但是，如果选择了一个标记，我希望在单击缩放按钮时朝着/远离该标记进行缩放 我想要的行为类似于使用滚轮缩放时的行为，在滚轮中，它朝着/远离光标位置缩放，我只想朝/远离选定的标记缩放 有没有一种简单的方法可以通过api实现这一点，或者我需要自己进行计算 编辑： 根据朱利安的建议，我提出了以下建议： 这是一个很好的方法，但并不完全是我想要的，因为它直接将标记居中。我只是想放大标记，而不是将其居中。就像使用滚轮向指针缩放一样 我找到了一个类似问题的答案： 您自己计算新中心的位置：Javascript 谷歌地图Api向标记缩放,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我有一张带有一些标记和放大/缩小按钮的地图 当我点击按钮时，我会朝地图中心/远离地图中心缩放，如果没有选择标记，这是很好的。但是，如果选择了一个标记，我希望在单击缩放按钮时朝着/远离该标记进行缩放 我想要的行为类似于使用滚轮缩放时的行为，在滚轮中，它朝着/远离光标位置缩放，我只想朝/远离选定的标记缩放 有没有一种简单的方法可以通过api实现这一点，或者我需要自己进行计算 编辑： 根据朱利安的建议，我提出了以下建议： 这是一个很好的方法，但并不完全是我想要的，因为它直接将标记居中。我只是想放大标记
function zoomInAtMarker(marker)
{
var pos = marker.getPosition();
var bounds = map.getBounds();
map.setZoom(map.getZoom() + 1);
var span = map.getBounds().toSpan();
var s = pos.lat() - span.lat() * (pos.lat() - bounds.getSouthWest().lat()) / bounds.toSpan().lat();
var w = pos.lng() - span.lng() * (pos.lng() - bounds.getSouthWest().lng()) / bounds.toSpan().lng();
map.panToBounds({ south:s, north:s + span.lat(), west:w, east:w + span.lng()});
}
这大致就是我想要的功能，但我希望有一种更自然的方法来实现这一点。您可以使用缩放更改事件（参考：） 在上次单击的标记上居中缩放的小示例：
<div id="map" style="height: 100%;"></div>
<script type="text/javascript">
var currentMarker = null;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: -45.363, lng: 131.044}
});
google.maps.event.addListener(map, 'zoom_changed', function() {
if (currentMarker) {
map.setCenter({lat: currentMarker.position.lat(), lng: currentMarker.position.lng()});
}
});
var markers = [{
lat: -33.890542,
lng: 151.274856
}, {
lat: -35.923036,
lng: 134.259052
}, {
lat: -41.028249,
lng: 177.157507
}, {
lat: -66.80010128657071,
lng: 111.28747820854187
}, {
lat: -25.950198,
lng: 222.259302
}
];
markers.forEach(m => {
var marker = new google.maps.Marker({
position: {lat: m.lat, lng: m.lng},
map: map
});
marker.addListener('click', () => {
currentMarker = marker;
});
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
var currentMarker=null；
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心：{纬度：-45.363，液化天然气：131.044}
});
google.maps.event.addListener（映射'zoom_changed'，函数（）{
如果（当前标记）{
setCenter（{lat:currentMarker.position.lat（），lng:currentMarker.position.lng（）}）；
}
});
变量标记=[{
lat:-33.890542，
液化天然气：151.274856
}, {
纬度：-35.923036，
液化天然气：134.259052
}, {
lat:-41.028249，
液化天然气：177.157507
}, {
lat:-66.80010128657071，
液化天然气：111.28747820854187
}, {
lat:-25.950198，
液化天然气：222.259302
}
];
markers.forEach（m=>{
var marker=new google.maps.marker({
位置：{lat:m.lat，lng:m.lng}，
地图：地图
});
marker.addListener（'单击'，（）=>{
currentMarker=标记；
});
});
}