使用超链接控制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);
}

所以你只需要设置你的超链接的click事件来运行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);
}