Question

当访问者点击某个网站时，会在该位置显示StreetView。当他们退出图片时，代码将获取最近的两个标记坐标（来自mongodb）并缩小地图以包含计算的边界框。

我想拥有它，以便地图保持在刚访问的标记的中心，并缩小到足以显示完整的边界框。这将有助于用户跟踪他们刚刚去过的地方。

Click the image to calculate the bounding box

此图像的标记位于最左侧。如您所见，边界框居中。

enter image description here

我已经阅读过，但对我来说似乎没有什么明显的。 Google API V3是否有针对此的方法？

/****
COLLECT Data from RESTful Service
This code gets the nearest two markers and calculates the zoom to set the map to include them in view.
****/
bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng( data.locs.lat, data.locs.lng ));
nearest = {};
$.ajax({
    type: "GET",
    dataType: "json",
    data: { lat : data.locs.lat,  //the marker you are viewing 
            lng : data.locs.lng},
    async: false,
    url: "php/restful.get.nearest.markers.php",
    success: function (data) {
        nearest = data;  
    }
});
$.each(nearest, function () 
{
    bounds.extend(new google.maps.LatLng( this.locs.lat, this.locs.lng ));
});
/****
END COLLECT Data from RESTful Service
****/
map.fitBounds(bounds);  
new google.maps.Rectangle({
    bounds: bounds,
    map: map,
    fillColor: "#000000",
    fillOpacity: 0.2,
    strokeWeight: 0
});

Answer 1

这可能不是最简单的方法，但它可以是一个开始。

查看Google Maps API MapOptions。您将看到一个名为zoom的属性，从底部开始第三个，它可以控制地图缩放（显然）。

然后在地图的methods中有两种方法getZoom和setZoom，可用于以编程方式控制地图的缩放级别。

你将不得不尝试这些，当然setCenter不应该是一个大问题。

尝试并找到缩放级别所涵盖的内容，就距离而言，计算边界框所覆盖的内容并相应地设置缩放级别和中心。

Answer 2

一种可能的解决方案是保存sw / ne界限并在bounds_changed上设置事件侦听器。当边界发生变化时，将中心设置为标记并检查sw / ne界限是否在新边界内。如果没有，请缩小。如果可见，请清除事件监听器：

function initialize() {
    var center = new google.maps.LatLng(53.488986, -10.017925)
    var mapOptions = {
        center: center,
        zoom: 10
    };

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

    var mainMarker = new google.maps.Marker({
        position: center,
        map: map
    });

    var bounds = new google.maps.LatLngBounds();

    // some dummy values for this example
    bounds.extend(new google.maps.LatLng(53.2, -10));
    bounds.extend(new google.maps.LatLng(53.8, -9));

    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();

    new google.maps.Rectangle({
        bounds: bounds,
        map: map,
        fillColor: "#000000",
        fillOpacity: 0.2,
        strokeWeight: 0
    });

    map.fitBounds(bounds);

    var boundsListener = google.maps.event.addListener(map, 'bounds_changed', function() {
        map.setCenter(center);

        bounds = map.getBounds();

        if (bounds.contains(sw) && 
            bounds.contains(ne)) {

            google.maps.event.removeListener(boundsListener);
        } else {
            map.setZoom(map.getZoom() - 1);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

有没有办法告诉谷歌地图以标记为中心缩小并显示计算的边界框？

2 个答案: