0

私は次のようなことをしようとしています: http://www.google.com/intl/en/+/demo/

つまり、私は次のことを目指しています。

  1. マップの範囲とズームを制限します (ユーザーが範囲外にスクロールした後、マップが常に中央に戻るようにする可能性があります)。
  2. html を含むオーバーレイを作成する

http://econym.org.uk/gmap/range.htmよりも最初のポイントのより良い解決策を見た人はいますか?

4

1 に答える 1

2

#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 がタイルの HTML ではなく JPG 画像を返しているように見えます。JPG 画像ではなく HTML であると思わせる機能を説明できれば、その機能がどのように実装されているかを突き止めることができるかもしれません。

于 2011-07-04T19:50:56.743 に答える