у меня есть Google Map V3, невозможно обновить map.setCenter из пользовательского ввода - PullRequest
Новая
       0

у меня есть Google Map V3, невозможно обновить map.setCenter из пользовательского ввода

0 голосов
/ 18 января 2012

Я новичок в этом, но у меня есть карта Google V3, которая загружается из информации о геокоде браузера W3C пользователя, и я извлекаю страну, штат и город из объекта геокодирования и обновляю поля ввода.Если пользователь вводит адрес улицы, я хочу геокодировать его через Google, изменить map.setCenter и setZoom и отобразить обновленную карту.Когда это сработает, я хочу добавить маркер и информационное окно.Несмотря на часы исследований и испытаний, я не могу получить геокод и обновление для работы.Похоже, что инструмент разработчика в Chrome указывает на то, что выполнение прекращается / завершается с ошибкой в ​​строке geocoder.geocode, которая показана жирным шрифтом ниже.Вот соответствующий код. 

var map, geocoder, marker, infowindow; //global variables

function initializeMap() {
// Try W3C Geolocation to geolocate desktop user
//initialize Google map, geolocate desktop user, and display after page loads
//find country, state, and city for the user's location  -  this all works
}
window.onload = initializeMap;

//change the Google Map after a user enters a street address
$("#streetAddress").blur(function() {
    //if state, city and street address locations are present
if ( $(this).val().length > 0 && $("#state").val().length > 0 && $("#city3").val().length > 0  ) {
    var gAddress =  [$(this).val() + ", " + $("#city3").val() + ", " + $("#state").val()] ;
    //get coordinates of this address
    //if no geocode object exists, create one
    if (!geocoder) {
    geocoder = new google.maps.Geocoder(); //create Geocoder object else use existing one from initializeMap() ?
    }       
    //create a GeocoderRequest object with user's street address
    var geoCoderRequest = {address:  gAddress} 
    //make a Geocoder request
    geocoder.geocode( geoCoderRequest, function(results, status) {  **//this line fails**
    //check if status is OK
            if ( status === google.maps.GeocoderStatus.OK) {
            //update center of existing map on location returned for this address
            map.setCenter(results[0].geometry.location);
            map.setZoom(14);
            }   
    });         
    } else {
            return; //no action if gAddress is incomplete
        }
});

1 Ответ

1 голос
/ 18 января 2012

Согласно документации адрес должен быть строкой, но вы создали gAddress в виде массива.

Попробуйте: 

var gAddress =  $(this).val() + ", " + $("#city3").val() + ", " + $("#state").val();

Обновление: вВ ответ на ваше желание сделать масштабирование после начальной загрузки карты (например, в ответ на пользовательский ввод) вот простой пример. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    var map;
    var start = 1;

    function initialize() {
        var homeLatlng = new google.maps.LatLng(51.476706,0); // London

        var myOptions = {
            zoom: 15,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function setZoom() {
        map.setZoom(18);
    }

    function setTimedZoom() {
        map.setZoom(start);

        start = start+1;
        if (start > 18) {
            start = 1;  // lets go round again and again; in reality you'd probably stop zooming at this point.
        }

        setTimeout(setTimedZoom, 3000);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <a href="javascript:setZoom()">Zoom In</a>
    <a href="javascript:setTimedZoom()">Timed</a>
    <div id="map_canvas"></div>
</body>
</html>
...