[英]How to get the latitude and longitude from a Google Map marker in order to update in a form?
我想制作一個自動更新標記坐標的表格。 這是我的腳本部分:
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
});
var x = document.getElementById("coordinates");
if (x.style.display === "none") {
x.style.display = "block";
};
var lati, longi;
lati = event.latLng;
longi = event.latLng;
$("#lat").val(lati);
$("#lng").val(longi);
});
形式如下:
<div id="coordinates" class="container" style="margin-top: 10px; display: none;">
<div class="col-sm-5 col-md-5 col-lg-5">
<input class="form-control" id="lat" name="lat" placeholder="Latitude" type="text" required>
</div>
<div class="col-sm-5 col-md-5 col-lg-5">
<input class="form-control" id="lng" name="lng" placeholder="Longitude" type="text" required>
</div>
您需要使用.lat()/.lng()
將它們分開:
var myLatLng = event.latLng;
var lati = myLatLng.lat();
var lngi = myLatLng.lng();
$("#lat").val(lati);
$("#lng").val(longi);
_^______________________ //Make sure you correct the typo here
您需要使用google.maps.LatLng
對象的.lat()
和.lng()
方法來獲取各個字段:
var lati, longi;
lati = event.latLng.lat();
longi = event.latLng.lng();
$("#lat").val(lati);
$("#lng").val(longi);
代碼段:
function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); google.maps.event.addListener(map, "click", function(event) { marker = new google.maps.Marker({ position: event.latLng, map: map, }); var x = document.getElementById("coordinates"); if (x.style.display === "none") { x.style.display = "block"; }; var lati, longi; lati = event.latLng.lat(); longi = event.latLng.lng(); $("#lat").val(lati); $("#lng").val(longi); }); } google.maps.event.addDomListener(window, "load", initialize);
html, body, #map_canvas { height: 95%; width: 100%; margin: 0px; padding: 0px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="coordinates" class="container" style="margin-top: 10px; display: none;"> <div class="col-sm-5 col-md-5 col-lg-5"> <input class="form-control" id="lat" name="lat" placeholder="Latitude" type="text" required> </div> <div class="col-sm-5 col-md-5 col-lg-5"> <input class="form-control" id="lng" name="lng" placeholder="Longitude" type="text" required> </div> </div> <div id="map_canvas"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.