Сохранение двух переменных из ввода карт Google - PullRequest
Новая
       0

Сохранение двух переменных из ввода карт Google

0 голосов
/ 28 марта 2011

Итак, вот что у меня есть: http://clients.pixelbleed.net/geocoder/geocoder.html

Я думаю об этом, но у меня есть первое поле ввода , работающее ... это означает, что оновозьмет адрес, преобразует его в лат / длинный и поместит на карту.Все, что я сделал для второго ввода, это продублировал функцию codeAddress () и переименовал ее.

Что я действительно хотел бы сделать, так это взять оба поля ввода, позволить кому-то указать адрес, геокодировать его в широту / долготу и сохранить его в переменной.Затем я могу манипулировать этой переменной, чтобы выполнить уравнение, которое мне в конечном итоге нужно сделать ... просто не знаю, как сохранить их как таковые.Есть мысли?

Это мой JS: 

<script type="text/javascript"> 
  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });

  }
function codeAddress2() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });

  }
</script>

А вот как его называют кнопки: 

<body onload="initialize()"> 
  <div> 
    <input id="address" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress()"> 
  </div>
  <div> 
    <input id="address" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress2()"> 
  </div>  
<div id="map_canvas" style="height:90%;top:80px"></div> 
</body>

1 Ответ

1 голос
/ 28 марта 2011

Я создал Gist с полным примером здесь: https://gist.github.com/890998

Мое объяснение следующее ...

Вы могли бы создать объект javascript, который мог бы хранить результаты как свойство expando. Затем после завершения каждого запроса геокодирования сохраните результат, а затем вызовите функцию для выполнения вычисления.

Добавить переменную, в которой вы можете сохранить результаты как свойства expando 

  var geoResults = {};

Вместо того, чтобы иметь две почти идентичные функции, которые выполняют геокодирование, измените его так, чтобы он принимал 'id' ввода адреса. Мы можем использовать этот параметр id в качестве имени свойства для нашего объекта geoResults. 

  function codeAddress(id) {
    var address = document.getElementById(id).value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });

        // store the results in the geoResults object
        geoResults[id] = results[0].geometry.location;
        doCalculation();

      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

Теперь в нашей функции doCalculation () мы можем просто проверить, было ли геокодировано оба адреса, и если да, то делать с результатами все, что вы хотите. 

  function doCalculation() {
    if (typeof geoResults.address1 === "object" 
        && typeof geoResults.address2 === "object") {

        // Yay.. do something now.
        // geoResults.address1 is a LatLng() object.
        // geoResults.address2 is a LatLng() object.
    }
  }

Нам просто нужно изменить две вещи с вашим HTML.

  • Убедитесь, что у вас есть уникальные атрибуты id. адрес1 и адрес2
  • Измените атрибут onclick, чтобы передать идентификатор в функцию codeAddress в качестве параметра.

Вот как это выглядит 

<body onload="initialize()"> 
  <div> 
    <input id="address1" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress('address1')"> 
  </div>
  <div> 
    <input id="address2" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress('address2')"> 
  </div>  
<div id="map_canvas" style="height:90%;top:80px"></div> 
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...