JQuery или Javascript помощник, чтобы получить LatLng от Google Maps - PullRequest
Новая
       16

JQuery или Javascript помощник, чтобы получить LatLng от Google Maps

1 голос
/ 06 января 2011

Мне нужно разрешить пользователю вводить геокод (LatLng) произвольной точки карты для хранения в БД и последующего использования.

Прежде чем приступить к выполнению обязанности, знаете ли вы плагин jQuery?или javascript, который:

  • Всплывающее окно карты Google
  • Пользователь перемещается по карте
  • Пользователь нажимает на точку
  • Этопомещает выбранный LatLng в текстовое поле
  • Закройте всплывающее окно

(или что-то вдоль линий)

1 Ответ

6 голосов
/ 07 января 2011

Я настоятельно рекомендую использовать API v3, поскольку он одинаково прост в использовании и быстр в освоении в качестве плагина. Также плагин не будет предлагать вам всплывающее окно.

Так вот мое решение:

1. Импорт

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

2. Поместите div в ваш html
<div class="mapClass" id="mapDiv" ></div>

3. Инициализируйте вашу карту

карта вар;

var greece = new google.maps.LatLng (38.822590,24.653320); 

//Map options
var mapOptions = {
    zoom: 6,
    center: greece,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Make a new map
map = new google.maps.Map(document.getElementById("mapDiv"),mapOptions);

Вуаля, вы получаете свою карту и элементы управления навигацией

4. Событие Bind onclick google.maps.event.addListener(map, "click",yourFunction);

И реализуйте свою функцию, чтобы получить координаты от щелчка и заполнить некоторые текстовые поля или что-то еще плюс добавить маркер 

function getCoordinates(event){
  if (event.latLng) {
       var marker;
       //Fill your textfields
       document.getElementById('yourLngTextfield').value=event.latLng.lng();
       document.getElementById('yourLatTextfield').value=event.latLng.lat();

       //Remove any previously added marker and add a marker to that spot
       if(marker!=null){
            marker.setMap(null);
       }

       var latlng = event.latLng;
       marker = new google.maps.Marker({
             position: latlng
             map: map
        });
  }
}

Вот и все. Но это не проверено.

Теперь, если вы хотите добавить все это во всплывающем окне, используйте colorbox

Если вы все еще хотите использовать плагины, отметьте здесь

Приветствия

...