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

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

ОТВЕТЫ

Ответ 1

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

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 lat/lng fields
        document.getElementById("latFld").value = latLng.lat();
        document.getElementById("lngFld").value = latLng.lng();
    });
}

Ответ 2

Код для google map api версии 3. v2 был обесценен, поэтому лучше придерживаться v3.

У вас есть div с id mapdiv, в который загружается карта

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

Добавить обработчик событий для события click, как в коде. Таким образом, когда вы нажимаете на карту, элемент ввода заполняется значениями 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 при перемещении мыши над картой, добавьте прослушиватель событий перемещения мыши, как в следующем коде. вы можете использовать диапазон или даже элемент ввода, чтобы увидеть значения. Я использовал диапазон в моем коде.

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

Ответ 3

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