English 中文(简体)
How do you click on a map and have latitude and longitude fields in a form populated?
原标题:

I have a form that a user needs to fill out where the location needs to be identified. I have latitude and longitude input fields on the form. I am also looking for the decimal lat and long. What I would like seems really simple. I just want to have a link that the user can click on that would popup a map (google or yahoo) and he could use the map to find the location and just click on it and that would automatically populate the two input fields for lat and long from the map. Has anyone done this before?

问题回答

Using the Google Maps API, you can do this pretty easily. Just add a click event handler to your map object, which passes in the latitude/longitude coordinates of where the user clicked (see details on the click event here).

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();
    });
}

The code is for google map api version 3. v2 has been depreciated so better to stick with v3.

Have a div with id mapdiv in which the map is loaded

Use an input element with id latlng to display the lat and lng when you click on the map. so that people can copy that value into another application. you can modify the opts variable according to your need.

Add an event handler for click event like in the code. So that when you click on the map the input element is populated with lat and lng values.

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()
    })      
}

The above is all that you need.


if you want to see the values of lat and lng when you move the mouse over the map then add a mouse move event listener like in the following code. you can use a span or even an input element to see the values. I had used span in my code.

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

You will need to know the lat/long of at least TWO points on the map, preferably not very close together, and also know their pixel coordinates relative to one corner (i.e. the best two points would be opposite corners). Then it s simple math to convert the pixel coordinate of the click into lat/long by interpolation. However, note that this works only as long as the area covered by the map is "flat" relative to the Earth s curvature. If the map covered a large area, say 6000 miles wide, there would be significant distortion. If you needed this to be accurate you d have to do some map projection to calculate the position.

Check out the Google Maps API as well as this link: http://www.gorissen.info/Pierre/maps/googleMapLocation.php

I think that the Google Maps API probably can do what you re looking for.





相关问题
How to decide the current point reach on google map?

How to decide the current point reach on google map? I have a list of points (pickup points) of a route that I want to show in my google map with polyline. Now i have to get the current location of ...

Topographical or relief data in Map APIs

I was wondering if anyone knew of any map APIs that offer topographical or relief data? I ve had a quick look at Google and Bing APIs, but could find nothing there. Google allow you to view a map as ...

Using maps on Windows Mobile

I m experimenting with maps on different mobile platforms. Getting Google Maps to work on Android was easy, following this tutorial. Getting the same to work on Windows Mobile is a different matter. ...

Adding a custom icon to a google map

I need a hand adding a custom icon to some Google Maps javascript. Code below for your reference: function populateMap() { var map = new GMap2(document.getElementById("map")); map.setCenter(new ...

RSS to KML Overlay

I m want to display my blog as a Google Map overlay (each post contains geotags). How can I dynamically create a KML overlay from an RSS? Or better, how can I create a loop (PHP) that would display ...

开放街道地图管理员

我需要开放Street的标记管理员。 地图,如山角地图。

热门标签