Geolocation: Filling forms with latitude and longitude. Google Maps API

问题

I've been building a google map where users share information plus their current location in a form. I want to automatically fill the lat, lng fields in my form with the Geolocation function. The only thing I cannot do is that last step. Here is my code:

<script src="https://maps.googleapis.com/maps/api/js?V=3.exp&key=wootwootwootwoot"></script>

    <script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>

var map;

function initialize() {
var mapOptions = {
zoom: 12
};
map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
  var pos = new google.maps.LatLng(position.coords.latitude,
                                   position.coords.longitude);

  var marker = new google.maps.Marker({
    map: map,
    position: pos,
    title: 'GPS'
  });

  map.setCenter(pos);
}, function() {
  handleNoGeolocation(true);
});
} else {

handleNoGeolocation(false);
}
}

function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}

var options = {
map: map,
position: new google.maps.LatLng(19.043516, -98.198232),
content: content
};

var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);


google.maps.event.addListener(marker, 'GPS', function() {
                var lat = marker.getPosition().lat();
                var lng = marker.getPosition().lng();
                $('#lat').val(lat);
                $('#lng').val(lng);
            });

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas"></div>

    <input id="lat"/>
    <input id="lng"/>

</body>
</html>

回答1:

You can try this code instead :

navigator.geolocation.getCurrentPosition(function(position) {

  var pos = new google.maps.LatLng(position.coords.latitude,
                                   position.coords.longitude);
  document.getElementById('lat').value = position.coords.latitude;
  document.getElementById('lng').value = position.coords.longitude;    
  var marker = new google.maps.Marker({
    map: map,
    position: pos,
    title: 'GPS'
  });

  map.setCenter(pos);
}, function() {
  handleNoGeolocation(true);
});

it's better to put your javascript code before the </body> tag

回答2:

You only have the code to put the values in your form in the error path, put code in the success path instead (I'm not sure what you expect the 'GPS' event you have on the marker to do):

function initialize() {
    var mapOptions = {
        zoom: 12
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            $('#lat').val(position.coords.latitude);
            $('#lng').val(position.coords.longitude);            
            var pos = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);

            var marker = new google.maps.Marker({
                map: map,
                position: pos,
                title: 'GPS'
            });

            map.setCenter(pos);

        }, function () {
            handleNoGeolocation(true);
        });
    } else {

        handleNoGeolocation(false);
    }
}

来源：https://stackoverflow.com/questions/31081246/geolocation-filling-forms-with-latitude-and-longitude-google-maps-api

标签

javascript

ajax

forms

google-maps-api-3

geolocation