2013-09-18 3 views
0

i'am новичок в API GMaps и javascript, так что это должен быть простой вопрос для вас, который действительно является экспертом. Я начал «играть» с API, и хотел попробовать простую вещь, но я не мог этого сделать! Я искал ответ, но я этого не понял. Я создал карту:Изменить масштаб с помощью события тега html

<script type="text/javascript"> 
function initialize() { 

    //CREATE THE MAP 
    var mapOptions = { 
     center: new google.maps.LatLng(-35.8190,-61.9010), 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 

    //GET THE ZOOM 
    var ez = map.getZoom(); 

    //TRYING TO CHANGE ZOOM FROM EXTERNAL LINK (DOESN'T WORK) 
function cambiarZOOM(nro) { 
    var newZ = ez + nro; 
    map.setZoom(newZ); 
    } 

} 
google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

Теперь HTML:

<html><body onload="initialize()"> 
<input type="button" onclick="cambiarZOOM(5)" value="CAMBIAR ZOOM"> 
</body></html> 

Ну, теперь I'am читать о google.maps.trigger(); но я не понимаю. Я буду много благодарен за ваш ответ !. СПАСИБО!

+0

Попробуйте использовать GMAP3 его легко в нем. http://gmap3.net/en/catalog/. Если ваша функция cambiarZOOM работает при нажатии кнопки if (map), используйте google.maps.event.trigger (карта, «опция»); –

ответ

0

Функция cambiarZOOM является локальной для функции инициализации (она содержится в этой функции). Он должен находиться в глобальной области (вне любого объявления функции), который будет использоваться в обработчике событий HTML (например, «onclick»). Ваша переменная «map» также должна быть глобальной, чтобы ее можно было использовать.

<script type="text/javascript"> 
var map = null; 
function initialize() { 

    //CREATE THE MAP 
    var mapOptions = { 
     center: new google.maps.LatLng(-35.8190,-61.9010), 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

function cambiarZOOM(nro) { 
    //GET THE ZOOM 
    var ez = map.getZoom(); 
    var newZ = ez + nro; 
    map.setZoom(newZ); 
    } 

</script> 
+0

Ну, во-первых, спасибо всем! Я попытался исправить код сам, но, похоже, он очень чувствителен к позиции операторов ALL. После попытки я просто скопировал и вставил этот последний код, и он работал нормально! Я предполагаю, что детали, которые я отсутствовал, были позицией .addDomListener. Когда я положил его внизу, код не сработал, но поместив его там, где он сейчас, исправил его. Посоветуйте начинающим, будьте осторожны с положением высказываний! СПАСИБО ВСЕМ –

0

map является локальной переменной initialise() - остальные функции не имеют доступа к нему, так что объявить его вне initialise(). Затем введите новую функцию, которая возвращает текущий масштаб карты.

var map; 

function initialize() { 
    var mapOptions = { 
    center: new google.maps.LatLng(-35.8190,-61.9010), 
    zoom: 15, 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
} 

function getCurentZoom() { 
    return map.getZoom(); 
} 

function cambiarZOOM(nro) { 
    var newZ = getCurentZoom() + nro; 
    map.setZoom(newZ); 
}  

google.maps.event.addDomListener(window, 'load', initialize); 
0

Ваша проблема заключается в том, что функция cambiarZOOM и map переменной доступны только в пределах области видимости функции инициализации. Чтобы использовать функцию в событии onclick, либо она должна быть доступна глобально (это обескуражено), либо вам нужно прикрепить эту функцию к кнопке, пока функция находится в области видимости.

Если вы передаете кнопку идентификатор (id='zoomButton'), вы можете прикрепить cambiarZOOM в функции инициализации, как так:

... 
function cambiarZOOM(nro) { 
    var newZ = ez + nro; 
    map.setZoom(newZ); 
    } 
} 

var button = document.getElementById('zoomButton'); 
button.onclick = function() { cambiarZOOM(5); }; 
Смежные вопросы