Google map API для отображения сети (аналогично туру по сервису Google.plus) - PullRequest
Новая
       25

Google map API для отображения сети (аналогично туру по сервису Google.plus)

0 голосов
/ 04 июля 2011

Я пытаюсь сделать что-то похожее на: http://www.google.com/intl/en/+/demo/

А именно, я стремлюсь:

  1. Ограничить диапазон и масштаб карты (возможно, заставить карту всегда прокручиваться назад к центру после того, как пользователь прокрутил за пределы диапазона)
  2. Создание оверлеев, содержащих html

Кто-нибудь видел лучшее решение для 1-й точки, чем: http://econym.org.uk/gmap/range.htm?

1 Ответ

2 голосов
/ 04 июля 2011

Я думаю, секретным соусом, который вы ищете в # 1, будут настройки minZoom и maxZoom в imageMapTypeOptions.Документация на http://code.google.com/apis/maps/documentation/javascript/reference.html#ImageMapTypeOptions

Решение на http://econym.org.uk/gmap/range.htm использует устаревший API Карт Google v2, но страница на http://www.google.com/intl/en/+/demo/ использует API Карт 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, возможно, мы можем попытаться выяснить, как они реализуют эту функцию.

...