通過谷歌地圖API V3獲取可拖動的pin的經度和緯度

我會解釋一下。我設法在地圖上有一個可拖動的圖釘。我想檢索這個點的座標並將它們放到兩個字段中：經度和緯度。這些座標稍後將通過PHP發送到SQL表。這是我打算做的an example，但不是幾個引腳，它只是一個，它是可拖動的。問題是：我甚至無法顯示初始點的座標。當然，當用戶移動插針時，我希望座標在字段中也改變。我希望我明確自己。我做錯了什麼？我應該使用Geocoding服務嗎？通過谷歌地圖API V3獲取可拖動的pin的經度和緯度

這裏去了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>

來源

2011-05-11 Macxim

無論這些工作

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

來源

2011-05-12 06:50:46 richie

嘿嘿，謝謝，其實我解決了這個問題，我自己昨天用完全相同的代碼你p規定外。所以我很高興我能得到相同的結果。我昨天要回答我自己的問題，但StackOverFlow不會讓我。顯然我不能在8小時前回復我自己的問題（新用戶）。這是我被告知的。無論如何，謝謝你的回答。 – Macxim 2011-05-12 08:35:38

，實際上是工作的代碼如下：

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

它會更好，如果地圖上可以重新中心一旦銷被丟棄。我想這可以用map.setCenter()完成，但我不知道我應該把它放在哪裏。我試圖把它放在這段代碼之前和之後，但它不起作用。

來源

2011-05-12 10:13:28 Macxim

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 = '/images/googlepins/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 = '/images/googlepins/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>

來源

2012-07-19 18:41:32

如何在一個表單中顯示兩個座標？像（-10.00000，10.00000）？ – 2016-08-27 06:16:29

看，從谷歌地圖API參考官方的代碼示例： http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html

來源

2013-04-13 03:36:22

斷開的鏈接.... – bobmoff 2017-02-17 10:33:46

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

工作很適合我..謝謝..

來源

2014-10-17 14:19:35

入住這fiddle

在以下代碼將您想要的event替換爲dragend。在你的情況'點擊'

google.maps.event.addListener(marker, 'dragend', function (event) { 
    document.getElementById("defaultLatitude").value = event.latLng.lat(); 
    document.getElementById("defaultLongitude").value = event.latLng.lng(); 
});

來源

2014-11-29 13:04:24

var zoomLevel = map.getZoom(); 
    var pos = (event.latLng).toString(); 

    $('#position').val(zoomLevel+','+pos); //set value to some input

Example Run JsFiddle

來源

2015-04-16 16:24:54

-1

試試這個:)

<!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>

來源

2015-08-11 12:14:25

通過谷歌地圖API V3獲取可拖動的pin的經度和緯度

回答

相關問題