如何在谷歌地图中获取并标记位置

时间:2016-07-29 10:44:53

标签: javascript php google-maps google-maps-api-3

我是google地图的新用户。 我使用此代码显示谷歌地图。

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(32.39793603710494,51.39232635498047),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

</html>

现在我想在点击它时标记并获取纬度和经度,我想要在数据库中保存纬度和经度。我该怎么做?

1 个答案:

答案 0 :(得分:2)

我已经提出了答案,因为我没有看到任何有针对性的问题。

 var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 1,
        center: new google.maps.LatLng(35.137879, -82.836914),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(47.651968, 9.478485),
    draggable: true
});

google.maps.event.addListener(myMarker, 'dragend', function (evt) {
// from here you can get where point marker user put and get that let long using 
// Lat = evt.latLng.lat().toFixed(3)
// Lng = evt.latLng.lng().toFixed(3) 
// after this you can do ajax call and save at you server and do what ever you wanted to do ...

    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});

google.maps.event.addListener(myMarker, 'dragstart', function (evt) {
    document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});

map.setCenter(myMarker.position);
myMarker.setMap(map);

html 

<body>
    <section>
        <div id='map_canvas'></div>
        <div id="current">Nothing yet...</div>
    </section>
</body>

工作演示:link

相关问题