google-maps - 使用超链接控制 Google 地图缩放级别

Question

如何使用超链接控制 Google 地图的缩放级别？例如，我想要三个定义的级别（英国的位置、欧洲的英国、世界的欧洲）。单击这些链接将显示具有不同缩放级别的地图。

我正在使用 Google Maps API v3

Answer 1

这应该不会太难做到。

创建地图时，您会获得对地图对象的引用，例如

var mapOptions = {mapTypeId: google.maps.MapTypeId.TERRAIN};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

拥有对象后，您可以像这样缩放到特定级别：

function zoomToLevel() {
    map.setZoom(8);
}

所以你只需要设置你的超链接的点击事件来运行 javascript 函数：

<a href="#" onclick="zoomToLevel(); return false;">Zoom to level 8</a>

但是，对于您正在做的事情，最好让地图根据该区域选择自己的缩放级别。此功能实际上是缩放以显示比利牛斯山脉，但该想法可用于任何区域，只要您的点位于对角线对角：

function zoomPyrenees() {
    var startPoint;
    var endPoint;
    var boundsPyrenees;

    startPoint = new google.maps.LatLng(43.373403, -1.774107);
    endPoint = new google.maps.LatLng(42.482463, 3.129875);
    boundsPyrenees = new google.maps.LatLngBounds();
    boundsPyrenees.extend(startPoint);
    boundsPyrenees.extend(endPoint);

    map.fitBounds(boundsPyrenees);
}