使用超链接控制 Google 地图缩放级别答案

【问题标题】：Control Google Map zoom level with a hyperlink使用超链接控制 Google 地图缩放级别
【发布时间】：2012-05-08 16:29:39
【问题描述】：

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

我正在使用 Google Maps API v3

【问题讨论】：

您是否也想同时更改地图的中心点？似乎您可能希望以英国境内的位置为中心进行第一个缩放级别，以整个英国为中心进行第二个缩放级别，并以欧洲为中心进行第三个缩放级别。

标签： google-maps google-maps-api-3 zooming

【解决方案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);
}

【讨论】：

太好了，谢谢。我想通了，但忘了发布我的解决方案-与此非常相似！再次感谢！