Google Map API setCenter Метод не работает

Question

Так что я должен добавить кнопку «center» на мою страницу, которая, щелкнув по карте, будет центрироваться на штыре, используя метод setCenter. Однако после того, как я нажал на свою кнопку, карты исчезли, а не показ центра.

это мой код.

Как решить проблему? Спасибо заранее!

<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script> 
    function init() { 
    var addButton = document.getElementById("setcenter"); 
    addButton.onclick = handleSetCenterButtonClicked; 
    getMyLocation(); 
    } 


    window.onload = init; 

    function getMyLocation() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(displayLocation); 
    } else { 
     alert("Oops, no geolocation support"); 
    } 
    } 

    function displayLocation(position) { 
    showMap(position.coords); 
    var latitude = position.coords.latitude; 
    var longitude = position.coords.longitude; 
    var div = document.getElementById("location"); 
    div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude; 
    } 

    var map; 
    function showMap(coords) { 
    var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude); 
    var mapOptions = { 
     zoom : 18, 
     center : googleLatAndLong, 
     mapTypeId : google.maps.MapTypeId.SATELLITE 
    }; 
    var mapDiv = document.getElementById("map"); 
    map = new google.maps.Map(mapDiv, mapOptions); 

    addMarker(googleLatAndLong); 
    } 

    var marker; 
    var markerArray = new Array(); 

    function addMarker(latLong) { 
    var markerOptions = { 
     position : latLong, 
     map : map 
    }; 
    marker = new google.maps.Marker(markerOptions); 

    markerArray.push(marker); 
    } 

    // this is my setCenter method function 
    function handleSetCenterButtonClicked(coords) { 

    var latLng = new google.maps.LatLng(coords.latitude, coords.lotitude); 
    map.setCenter(latLng); 
    } 

    // this is my setCenter method function 
</script> 

Answer 1

Проблема в вашей функции (кроме опечатки):

function handleSetCenterButtonClicked(coords) { 

    var latLng = new google.maps.LatLng(coords.latitude, coords.lotitude); 
    map.setCenter(latLng); 
    } 

По щелчку coords имеет тип MouseEvent, который не имеет информации о lat/lng. Это не то же самое, что MouseEvent из google api. Неясно, какое значение вы хотите установить в центре. К позиции пользователя, открывшего вашу страницу? Или к какой-то другой ценности?

Если вы хотите расположить центр на месте пользователя после того, как он тащит вокруг вы можете добавить глобальную переменную:

var yourPos; 

В функции showMap() установить его известное значение:

yourPos = googleLatAndLong; 

И использовать его в обработчик кликов:

function handleSetCenterButtonClicked(coords) { 

    //var latLng = new google.maps.LatLng(coords.lat(), coords.lng()); 
    //map.setCenter(latLng); 

    map.setCenter(yourPos); 
    } 

Кроме того, нет обработки корпуса если пользователь не хочет делиться своей позицией.

Answer 2

Я думаю, что код не так:

var latLng = new google.maps.LatLng(coords.latitude, coords.lotitude); 

Оно должно быть:

var latLng = new google.maps.LatLng(coords.latitude, coords.longitude); 

В функции handleSetCenterButtonClicked (Coords) - это "coords.longitude" не «COORDS. lotitude "