Question

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

即我的目标是：

限制地图的范围和缩放（在用户滚动到范围之外后，可能会使地图始终滚动回中心）
创建包含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 Maps API v2，但http://www.google.com/intl/en/+/demo/处的页面使用的是Google Maps API 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图像，那么我们可以尝试弄清楚它们是如何实现该功能的。

用于显示网络的Google地图API（类似于Google.plus服务导览）

1 个答案: