1

Я нахожусь в ситуации, что мне нужно включить Гавайи и Аляску GoogleMap, но я добавил JQuery, которые препятствуют карте тащиться за пределами американского BounderiesКак Перенесите Гавайи и Аляска Рядом Северная Америка Google Maps

Возможно ли переместить Гавайи и Аляску в районе Северной Америки? Благодаря

Вот один, который предотвращает карту от Перетаскивание Вне карты

<script type="text/javascript"> 
    var minZoomLevel = 5; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: minZoomLevel, 
     center: new google.maps.LatLng(38.50, -90.50), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    // Bounds for North America 
    var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(28.70, -127.50), 
    new google.maps.LatLng(48.85, -55.90) 
    ); 

    // Listen for the dragend event 
    google.maps.event.addListener(map, 'dragend', function() { 
     if (strictBounds.contains(map.getCenter())) return; 

     // We're out of bounds - Move the map back within the bounds 

     var c = map.getCenter(), 
     x = c.lng(), 
     y = c.lat(), 
     maxX = strictBounds.getNorthEast().lng(), 
     maxY = strictBounds.getNorthEast().lat(), 
     minX = strictBounds.getSouthWest().lng(), 
     minY = strictBounds.getSouthWest().lat(); 

     if (x < minX) x = minX; 
     if (x > maxX) x = maxX; 
     if (y < minY) y = minY; 
     if (y > maxY) y = maxY; 

     map.setCenter(new google.maps.LatLng(y, x)); 
    }); 

    // Limit the zoom level 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel); 
    }); 

</script> 
+0

Возникли вопросы? Я думаю, вам понадобится пользовательская карта (пользовательские плитки), в которой вы найдете Гавайи и Аляску. – geocodezip

+0

@geocodezip можно ли перемещать аляски и гавайи ближе к северу от Америки? –

+3

Энрике, что вы хотите, обычно называют «вставками». Тот же вопрос был задан [здесь] (https://groups.google.com/forum/#!topic/google-maps-api/mgB7J4EsKZA) в 2008 году (Google maps v2?) И предлагает, чтобы решение было «вставить» другая карта как пользовательский элемент управления ». К сожалению, ссылка на демо нарушена. –

ответ

2

Вы можете иметь более одного Карта showing.The изображение показывает главную Карта США, и два маленьких Карты с Аляски и Гавайских островов. enter image description here

Следующий код изготовил его.

<script type="text/javascript"> 
    function initialize() 
{ 
    var USA = new google.maps.LatLng(38.50, -90.50); 
    var ALASKA = new google.maps.LatLng(64.0000, -150.0000); 
    var HAWAII = new google.maps.LatLng(21.3114, -157.7964); 

    var myOptions = 
    { 
     zoom: 4, 
     center: USA, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var myOptions2 = 
    { 
     zoom: 3, 
     center: ALASKA, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var myOptions3 = 
    { 
     zoom: 6, 
     center: HAWAII , 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2); 
    var map3 = new google.maps.Map(document.getElementById("map_canvas_3"), myOptions3); 
    google.maps.event.addListener(map, "zoom_changed", function() 
    { 
     zoomLevel = map.getZoom(); 
     map2.setZoom(zoomLevel); 
     map3.setZoom(zoomLevel); 
    }) 
    google.maps.event.addListener(map, "drag", function() 
    { 
     centre = map.getCenter(); 
     map2.setCenter(centre); 
     map3.setCenter(centre); 
    }) 
} 
</script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="top: 5px; left: 30px; width:800px; height:600px; float: left"></div> 
<div id="map_canvas_2" style="top: 5px; left: 75px; width:300px; height:300px"></div> 
<div id="map_canvas_3" style="top: 15px; left: 75px; width:300px; height:300px"></div> 
</body> 
Смежные вопросы