0

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

即我的目标是：

  1. 限制地图的范围和缩放（可能使地图在用户滚动超出范围后始终滚动回中心）
  2. 创建包含 html 的叠加层

任何人都看到比第一点更好的解决方案：http: //econym.org.uk/gmap/range.htm？

4

1 回答 1

2

I think the secret sauce you're looking for in #1 would be the minZoom and maxZoom settings in imageMapTypeOptions. Documentation is at http://code.google.com/apis/maps/documentation/javascript/reference.html#ImageMapTypeOptions

The solution at http://econym.org.uk/gmap/range.htm uses the deprecated Google Maps API v2, but the page at http://www.google.com/intl/en/+/demo/ uses Google Maps API v3, so they are probably doing it in substantially different ways.

Here's basically how the Google page is doing it:

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;
}

Looking at this code, it appears to me that Google is returning JPG images and not HTML for their tiles. If you can explain what features make you think it's HTML rather than JPG images, maybe we can try to figure out how they're implementing that feature.

于 2011-07-04T19:50:56.743 回答