如何点击地图并在填充的表格中包含纬度和经度字段？

Question

我有一个表单,用户需要填写需要识别位置的位置.我在表单上有纬度和经度输入字段.我也在寻找十进制lat和long.我想要的似乎很简单.我只想要一个用户可以点击的链接,弹出地图(谷歌或雅虎),他可以使用地图找到位置,只需点击它,这将自动填充lat的两个输入字段和从地图上看很久.有没有人这样做过？

Answer 1

使用Google Maps API,您可以轻松完成此操作.只需向地图对象添加一个单击事件处理程序,该处理程序将传递用户单击位置的纬度/经度坐标(请参阅此处的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

该代码适用于谷歌地图api版本3. v2已被折旧,因此最好坚持使用v3.

有一个id为mapdiv的div,其中加载了地图

当您单击地图时,使用带有id 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的值,请添加鼠标移动事件侦听器,如下面的代码所示.您可以使用span或甚至输入元素来查看值.我在代码中使用了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

您将需要知道地图上至少两个点的纬度/经度，最好不是非常靠近，并且还需要知道它们相对于一个角的像素坐标（即最好的两个点将是对角）。然后通过简单的数学运算将点击的像素坐标通过插值转换为纬度/经度。但请注意，只有当地图覆盖的区域相对于地球曲率“平坦”时，此方法才有效。如果地图覆盖很大的区域，比如 6000 英里宽，就会出现明显的扭曲。如果您需要准确，则必须进行一些地图投影来计算位置。