Question

我有一个带有一些标记和放大/缩小按钮的地图。

当我点击按钮时，我朝向/远离地图中心缩放，没有选择标记时很好。但是如果选择了标记，我想在单击缩放按钮时朝向/远离该标记进行缩放。

我想要的行为类似于使用滚轮进行缩放时，它会朝向/远离光标位置进行缩放，我只想缩小/远离所选标记。

有没有一种简单的方法可以使用api执行此操作，还是需要为此进行自己的计算？

编辑：

在Julien的建议之后，我做了以下代码：https://codepen.io/anon/pen/QQvZBd

这是一个很好的方法，但不完全是我所追求的，因为它直接使标记居中。我只是想缩放到标记，而不是居中。就像使用滚轮向指针缩放一样。

我找到了这个答案，问题是：Google maps zoom in on marker

您自己计算新中心的地方：

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

我在这里制作了一个代码：https://codepen.io/anon/pen/ddWgaE

这大致是我想要的功能，但我希望有一种更原生的方式来实现这一目标。

Answer 1

您可以使用 zoom_changed 事件（参考：https://developers.google.com/maps/documentation/javascript/reference）。

将缩放集中在最后点击的标记上的小工作示例：

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

谷歌地图Api缩放到标记

1 个答案: