Как вы нажимаете на карту и заполняете поля широты и долготы в форме?

Question

У меня есть форма, которую пользователь должен заполнить, где местоположение должно быть идентифицировано. У меня есть поля ввода широты и долготы на форме. Я также ищу десятичные и длинные лат. То, что я хотел бы, кажется действительно простым. Я просто хочу, чтобы у пользователя была ссылка, по которой можно было бы открыть карту (Google или Yahoo), и он мог бы использовать карту, чтобы найти местоположение, и просто щелкнуть по ней, и это автоматически заполнило бы два поля ввода для лат и долго от карты. Кто-нибудь делал это раньше?

Answer 1

Используя API Карт Google, вы можете сделать это довольно легко. Просто добавьте обработчик события щелчка к объекту карты, который передает координаты широты / долготы того места, где пользователь щелкнул (подробности о click событии здесь ).

function initMap()
{
    // do map object creation and initialization here
    // ...

    // add a click event handler to the map object
    GEvent.addListener(map, "click", function(overlay, latLng)
    {
        // display the lat/lng in your form's lat/lng fields
        document.getElementById("latFld").value = latLng.lat();
        document.getElementById("lngFld").value = latLng.lng();
    });
}

Answer 2

Код для Google Map API версии 3. v2 устарел, поэтому лучше придерживаться v3.

Иметь div с id mapdiv, в который загружена карта

Используйте элемент ввода с идентификатором latlng, чтобы отобразить значения lat и lng при нажатии на карту. чтобы люди могли скопировать это значение в другое приложение. Вы можете изменить переменную opts в соответствии с вашими потребностями.

Добавить обработчик события для события щелчка, как в коде. Чтобы при нажатии на карту входной элемент заполнялся значениями lat и lng.

var map;
function mapa()
{
    var opts = {'center': new google.maps.LatLng(26.12295, -80.17122), 'zoom':11, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
    map = new google.maps.Map(document.getElementById('mapdiv'),opts);

    google.maps.event.addListener(map,'click',function(event) {
        document.getElementById('latlng').value = event.latLng.lat() + ', ' + event.latLng.lng()
    })      
}

Вышесказанное - это все, что вам нужно.

<ч />

если вы хотите видеть значения lat и lng при наведении курсора на карту, добавьте прослушиватель событий перемещения мыши, как в следующем коде. Вы можете использовать диапазон или даже элемент ввода, чтобы увидеть значения. Я использовал span в своем коде.

google.maps.event.addListener(map,'mousemove',function(event) {
    document.getElementById('latspan').innerHTML = event.latLng.lat()
    document.getElementById('lngspan').innerHTML = event.latLng.lng()
});

Answer 3

Проверьте API Карт Google, а также эту ссылку: http://www.gorissen.info/Pierre/maps/googleMapLocation.php

Я думаю, что Google Maps API, вероятно, может сделать то, что вы ищете.

Answer 4

Вам нужно будет знать широту / длину по крайней мере ДВУХ точек на карте, предпочтительно не очень близко друг к другу, а также знать их координаты пикселей относительно одного угла (то есть две лучшие точки будут противоположными углами). Тогда это простая математика для преобразования пиксельной координаты клика в широту / долготу путем интерполяции. Однако обратите внимание, что это работает только до тех пор, пока область, покрываемая картой, является «плоской» относительно кривизны Земли. Если бы карта охватывала большую область, скажем, шириной 6000 миль, это привело бы к значительным искажениям. Если вам нужно это, чтобы быть точным, вам нужно сделать некоторую проекцию карты, чтобы вычислить позицию.