Блог

Главная - Вопросы по программированию - Геокод Google Maps не работает (нет маркеров)

Геокод Google Maps не работает (нет маркеров)

#javascript #google-maps #google-maps-api-3

#javascript #google-карты #google-maps-api-3

Вопрос:

У меня есть веб-страница, чтобы найти широту, долготу и получить маркер для этой позиции. Я использую Google Maps.

Моя веб-страница получает 2 адреса из пользовательского ввода, адреса 1 и адреса 2 и вызывает codeAddress() 

 <div id="panel">
  <input id="address1" type="textbox" value="">
  <input id="address2" type="textbox" value="">
  <input type="button" value="find!" onclick="codeAddress()">
</div>

Это мой код JavaScript:

 var map;
var address1 = document.getElementById('address1').value;
var address2 = document.getElementById('address2').value;

function initialize() {
    var latlng = new google.maps.LatLng(-7.275920, 112.791871);
    var mapOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
    var gc = google.maps.Geocoder();
    gc.geocode({
        'address': address1
    }, function (res1, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            gc.geocode({
                'address': address2
            }, function (res2, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    new google.maps.Marker({
                        position: res1[0].geometry.location,
                        map: map
                    });
                    new google.maps.Marker({
                        position: res2[0].geometry.location,
                        map: map
                    });
                }
            });
        }
    });
}

Когда я нажимаю кнопку find , я не получаю маркеры. Может ли мне помочь какой-либо орган?

Ответ №1:

Измените codeAddress функцию следующим образом:

 function codeAddress() {
    var gc = new google.maps.Geocoder(); // notice new keyword
    initialize(); // Calling initialize. If you skip it, maps aren't loading
    gc.geocode({
        'address': address1
    }, function(res1, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            gc.geocode({
                'address': address2
            }, function(res2, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    new google.maps.Marker({
                        position: res1[0].geometry.location,
                        map: map
                    });
                    new google.maps.Marker({
                        position: res2[0].geometry.location,
                        map: map
                    });
                }
            });
        }
    });

Убедитесь, что оба входных параметра имеют некоторое значение для его проверки.

Демонстрация: http://jsfiddle.net/lotusgodkk/GCu2D/213 /

Комментарии:

1. Вы можете просто указать, что он отсутствует initialize() , и new ключевое слово. Я не думаю, что есть необходимость во всем коде.

2. Я думаю, нам нужно предоставить некоторый код, если нам нужно включить ссылки jsfiddle.

3. ваш код правильный. . но когда я установил значение из входного текста из Интернета, я не получил маркеры

4. Я полагаю, это потому, что изначально вы сохранили значения входных данных в переменных и предполагаете, что начальные значения входных данных равны none. Таким образом, ваши переменные не содержат никакого значения, и то же самое передается на карту. Если вы попытаетесь переместить код инициализации переменной для address1 и address2 внутри codeAddress, это сработает, потому что ваши значения являются динамическими. Если бы они были постоянными, вы могли бы следовать этому подходу

5. @KK Да, но нет смысла писать код дважды. Если вы просто не хотите, чтобы OP скопировал вставку и ничего не узнал из вашего ответа.

Ответ №2:

  • обновляйте переменные адреса из формы при запуске функции 
     function codeAddress() {
  var address1 = document.getElementById('address1').value;
  var address2 = document.getElementById('address2').value;
  • проверьте статус! = OK 
     } else alert("Geocode failed of "   address1   ", status="   status);
  • используйте «new» перед конструктором геокодера Google Maps 
     var gc = new google.maps.Geocoder();
  • удалите существующие маркеры перед отображением новых, чтобы маркеры не накапливались на карте 
     if (marker1 amp;amp; marker1.setMap) marker1.setMap(null);

полный код:

     var map = null;
    var marker1 = null;
    var marker2 = null;
    var gc = new google.maps.Geocoder();

    function initialize() {
      var latlng = new google.maps.LatLng(-7.275920, 112.791871);
      var mapOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      codeAddress();
    }

    function codeAddress() {
      var address1 = document.getElementById('address1').value;
      var address2 = document.getElementById('address2').value;
      gc.geocode({
        'address': address1
      }, function (res1, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            gc.geocode({
                'address': address2
            }, function (res2, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (marker1 amp;amp; marker1.setMap) marker1.setMap(null);
                    marker1 = new google.maps.Marker({
                        position: res1[0].geometry.location,
                        map: map
                    });
                    if (marker2 amp;amp; marker2.setMap) marker2.setMap(null);
                    marker2 = new google.maps.Marker({
                        position: res2[0].geometry.location,
                        map: map
                    });
                } else alert("Geocode failed of "   address2   ", status="   status);
            });
        } else alert("Geocode failed of "   address1   ", status="   status);
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

рабочая скрипка

Метки: