用于显示web的Google.plus (类似于Google.plus服务巡演)

Question

我正在尝试做一些类似于：http://www.google.com/intl/en/+/demo/的事情

即我的目标是：

1. 限制地图的范围和缩放(可能会使地图始终在用户向外滚动后回滚到中心)
2. 创建包含html

的覆盖

有人认为第一点的解决方案比http://econym.org.uk/gmap/range.htm更好吗？

Answer 1

我认为你在#1中寻找的秘方是minZoom和maxZoom在imageMapTypeOptions中的设置。文档在http://code.google.com/apis/maps/documentation/javascript/reference.html#ImageMapTypeOptions

http://econym.org.uk/gmap/range.htm的解决方案使用被废弃的Google v2，但是http://www.google.com/intl/en/+/demo/的页面使用Google v3，所以他们可能以截然不同的方式来实现它。

以下是Google页面的基本操作方式：

function initMap() {
    var mapOptions = {backgroundColor: MAP_BACKGROUND_COLOR,
                      center: new google.maps.LatLng(MAP_INIT_LAT, MAP_INIT_LNG),
                      zoom: 6,
                      zoomControl: true,
                      zoomControlOptions:{
                          style: google.maps.ZoomControlStyle.LARGE,
                          position: google.maps.ControlPosition.LEFT_BOTTOM
                      },
                      panControl: true,
                      panControlOptions: {
                          position: google.maps.ControlPosition.LEFT_BOTTOM
                      },
                      mapTypeControl: false,
                      mapTypeControlOptions: {
                          mapTypeIds: [MAP_TYPE_NAME]
                      },
                      disableDoubleClickZoom: true
    };
    map = new.google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
    var imageMapTypeOptions = {getTileUrl: getTileUrl,
                           tileSize: new google.maps.Size(MAP_TILE_SIZE, MAP_TILE_SIZE),
                           isPng: false,
                           minZoom: MIN_ZOOM,
                           maxZoom: MAX_ZOOM,
                           name: MAP_TYPE_NAME
    };
    map.mapTypes.set(MAP_TYPE_NAME, new google.maps.ImageMapType(imageMapTypeOptions));
    map.setMapTypeId(MAP_TYPE_NAME);
    initMarkers();
    google.maps.event.addListener(map, "zoom_changed", onZoomChanged);
    mapIdleListener = google.maps.event.addListener(map, "idle", onMapLoaded);
    onZoomChanged()
}

function onZoomChanged() {
    featureButtonsActivated && closeInfobox();
    var a = map.getZoom();
    for (id in section)
        section[id].type != TYPE_FEATURE && (a >= section[id].zoom.min && a <= section[id].zoom.max ? createMarker(id) : removeMarker(id))
}

function getTileUrl(point, number) {
    return getTilesFrom('http://www.gstatic.com/plus/demo/', point, number)
}

function getTilesFrom(cdnUrl, point, number) {
    point = getNormalizedCoord(point, number);
    if (!point)
        return null;
    cdnUrl = cdnUrl + "/" + number + "-" + point.x + "-" + point.y + ".jpg";
    switch (number) {
        case 2:
            if (point.y <= 0 || point.y >= 3)
                cdnUrl = WHITE_TILE_PATH;
            break;
        case 3:
            if (point.y <= 1 || point.y >= 6)
                cdnUrl = WHITE_TILE_PATH;
            break;
        case 4:
            if (point.y <= 4 || point.y >= 11)
                cdnUrl = WHITE_TILE_PATH;
            break;
        case 5:
            if (point.y <= 10 || point.y >= 22)
                cdnUrl = WHITE_TILE_PATH;
            break;
        case 6:
            if (point.y <= 21 || point.y >= 43)
                cdnUrl = WHITE_TILE_PATH
    }
    return cdnUrl;
}

看看这段代码，在我看来，Google返回的是JPG图像，而不是HTML。如果您可以解释哪些特性使您认为它是HTML而不是JPG图像，那么也许我们可以尝试找出它们是如何实现该功能的。