2016-11-09 4 views
0

Я в основном хочу создавать карты, которые приближаются к размеру, соответствующему углам SE-NW. Я пробовал так много вариаций, но не смог заставить его работать. Мне удалось разместить два маркера на одной версии моего скрипта, но не удалось сделать карту увеличенной до размера маркеров. Мне не нужны маркеры, я просто думал вне коробки. Я включу свой рабочий сценарий ниже, но буду признателен за любую помощь в создании функции fitBounds. Я работал над этим два дня, но я не программист столько решений, которые я нашел на этом веб-сайте, а другие не совсем понятны, или они не затрагивают мою точную проблему.Создание моей google-карты fitBounds

<!DOCTYPE html> 
<!-- This script works, but the size of the output should be as per the SW-NE coordinates -- not the 'div style width/height', and ignoring the center:coordinates --> 
<!-- This is one of several maps I am planning to create but I don't mind typing in the fitBounds coordinates by hand --> 
<html> 
<head> 
<title>Google Road Maps</title> 
<script src="http://maps.googleapis.com/maps/api/js"></script> 
<script> 
function initialize() { 
    var mapProp = { 
    center:new google.maps.LatLng(56.3,4.3), 
    zoom:8, 
    mapTypeId:google.maps.MapTypeId.ROADMAP, 
    disableDefaultUI:true,  
    scaleControl: true 
    }; 
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

var fitBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(53.3,-0.7), 
    new google.maps.LatLng(59.3,9.3) 
); 
</script> 
</head> 
<body> 
<div id="googleMap" style="width:600mm;height:600mm;"></div> 
</body> 
</html> 

ответ

0

Вам нужно позвонить Map.fitBounds с fitBounds объекта.

map.fitBounds(fitBounds); 

proof of concept fiddle

фрагмент кода:

function initialize() { 
 
    var mapProp = { 
 
    center: new google.maps.LatLng(56.3, 4.3), 
 
    zoom: 8, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    disableDefaultUI: true, 
 
    scaleControl: true 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 
    map.fitBounds(fitBounds); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 
var fitBounds = new google.maps.LatLngBounds(
 
    new google.maps.LatLng(53.3, -0.7), 
 
    new google.maps.LatLng(59.3, 9.3) 
 
);
html, 
 
body, 
 
#googleMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="googleMap"></div>