通过Google Maps API V3检索可拖动的图钉的纬度和经度

我会解释。 我设法在地图上有一个可拖动的图钉。 我想检索这个点的坐标，并把它们放在两个字段：经度和纬度。 这些坐标稍后将通过PHP发送到SQL表。 下面是我打算做的一个例子 ，但不是几个引脚，它只是一个，它是可拖动的。 问题是：我甚至无法显示初始点的坐标。 当然，当用户移动引脚时，我也希望坐标在字段中改变。 我希望我自己清楚。 我做错了什么？ 我应该使用地理编码服务吗？

JS： 

<script type="text/javascript"> var map; function initialize() { var myLatlng = new google.maps.LatLng(40.713956,-74.006653); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ draggable: true, position: myLatlng, map: map, title: "Your location" }); google.maps.event.addListener(marker,'click',function(overlay,point){ document.getElementById("latbox").value = lat(); document.getElementById("lngbox").value = lng(); }); } </script>

而HTML： 

 <html> <body onload="initialize()"> <div id="map_canvas" style="width:50%; height:50%"></div> <div id="latlong"> <p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p> <p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p> </div> </body> </html>

这两者都有效 

 google.maps.event.addListener(marker, 'click', function (event) { document.getElementById("latbox").value = event.latLng.lat(); document.getElementById("lngbox").value = event.latLng.lng(); }); google.maps.event.addListener(marker, 'click', function (event) { document.getElementById("latbox").value = this.getPosition().lat(); document.getElementById("lngbox").value = this.getPosition().lng(); });

你也可以考虑使用dragend事件 

 google.maps.event.addListener(marker, 'dragend', function (event) { document.getElementById("latbox").value = this.getPosition().lat(); document.getElementById("lngbox").value = this.getPosition().lng(); });

查看来自Google Maps API参考的官方代码示例： http : //gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html

实际工作的代码如下： 

 google.maps.event.addListener(marker, 'drag', function(event){ document.getElementById("latbox").value = event.latLng.lat(); document.getElementById("lngbox").value = event.latLng.lng(); });

一旦引脚掉线，地图可以重新居中，这样会更好。 我想这可以用map.setCenter()来完成，但我不知道该把它放在哪里。 我试图把这段代码之前和之后的权利，但它不会工作。

Google Maps V3示例。 下面是一个用户放弃单个引脚的示例，用新引脚，定制引脚图像，在DIV中的FORM FIELD中填充纬度/长度值的引脚替代掉落的引脚。 

 <html> <body onLoad="initialize()"> <div id="map_canvas" style="width:50%; height:50%"></div> <div id="latlong"> <p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p> <p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p> </div> </body> </html> <cfoutput> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=#YOUR-GOOGLE-API-KEY#&sensor=false"></script> </cfoutput> <script type="text/javascript"> //<![CDATA[ // global "map" variable var map = null; var marker = null; // popup window for pin, if in use var infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150,50) }); // A function to create the marker and set up the event window function function createMarker(latlng, name, html) { var contentString = html; var marker = new google.maps.Marker({ position: latlng, map: map, zIndex: Math.round(latlng.lat()*-100000)<<5 }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map,marker); }); google.maps.event.trigger(marker, 'click'); return marker; } function initialize() { // the location of the initial pin var myLatlng = new google.maps.LatLng(33.926315,-118.312805); // create the map var myOptions = { zoom: 19, center: myLatlng, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // establish the initial marker/pin var image = 'http://img.dovov.comgooglepins/pin2.png'; marker = new google.maps.Marker({ position: myLatlng, map: map, icon: image, title:"Property Location" }); // establish the initial div form fields formlat = document.getElementById("latbox").value = myLatlng.lat(); formlng = document.getElementById("lngbox").value = myLatlng.lng(); // close popup window google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); // removing old markers/pins google.maps.event.addListener(map, 'click', function(event) { //call function to create marker if (marker) { marker.setMap(null); marker = null; } // Information for popup window if you so chose to have one /* marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng); */ var image = 'http://img.dovov.comgooglepins/pin2.png'; var myLatLng = event.latLng ; /* var marker = new google.maps.Marker({ by removing the 'var' subsquent pin placement removes the old pin icon */ marker = new google.maps.Marker({ position: myLatLng, map: map, icon: image, title:"Property Location" }); // populate the form fields with lat & lng formlat = document.getElementById("latbox").value = event.latLng.lat(); formlng = document.getElementById("lngbox").value = event.latLng.lng(); }); } //]]> </script> 
 google.maps.event.addListener(marker, 'dragend', function (event) { document.getElementById("latbox").value = this.getPosition().lat(); document.getElementById("lngbox").value = this.getPosition().lng(); });

为我工作得很好..谢谢..

检查这个小提琴

在以下代码中将dragendreplace为所需的事件 。 在你的情况'点击' 

 google.maps.event.addListener(marker, 'dragend', function (event) { document.getElementById("defaultLatitude").value = event.latLng.lat(); document.getElementById("defaultLongitude").value = event.latLng.lng(); }); 
  var zoomLevel = map.getZoom(); var pos = (event.latLng).toString(); $('#position').val(zoomLevel+','+pos); //set value to some input

示例运行JsFiddle

尝试这个 ：） 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- develop by manoj sarnaik --> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Manoj Sarnaik</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw" type="text/javascript"></script> <script type="text/javascript"> var map = null; var geocoder = null; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(20.236046, 76.988255), 1); map.setUIToDefault(); geocoder = new GClientGeocoder(); } } function showAddress(address) { if (geocoder) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 15); var marker = new GMarker(point, {draggable: true}); map.addOverlay(marker); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6)); }); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6)); }); GEvent.trigger(marker, "click"); } } ); } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <form action="#" onsubmit="showAddress(this.address.value); return false"> <p> <input type="text" style="width:350px" name="address" value="Malegaon,washim" /> <input type="submit" value="Go!" /> </p> <div id="map_canvas" style="width: 600px; height: 400px"></div> </form> </body> </html>
    Interesting Posts

    如何在matplotlib中创build一个可拖动的图例？

    我怎样才能使一个jQuery UI'draggable（）'div可拖动触摸屏？