是否可以将地图中可拖动标记的纬度和经度（使用 javascript）转换为 HTML 表单？
Posted
技术标签:
【中文标题】是否可以将地图中可拖动标记的纬度和经度（使用 javascript）转换为 HTML 表单？【英文标题】：Is it possible to get the latitude and longitude of a draggable marker in a map (using javascript) into a form in HTML? 【发布时间】：2015-01-25 04:46:36 【问题描述】：我正在尝试获取谷歌地图中可拖动标记的纬度和经度。我需要这些值直接进入<input type="text"> 中的值属性。我已经做到了，唯一的问题是我不知道如何添加地理编码器，以便用户可以输入他们自己的地址并获取纬度和经度，但他们还需要将标记拖入谷歌地图不准确。我会把我的代码放在这里。感谢有人可以提供帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
<input type="text" id="latitude" placeholder="latitude">
<input type="text" id="longitude" placeholder="longitude">
<div id="map" style="width:500px; height:500px"></div>
<p><input class="postcode" id="Postcode" name="Postcode" type="text">
<input type="submit" id="findbutton" value="Find" /></p>
</body>
</html>
function initialize()
var $latitude = document.getElementById('latitude');
var $longitude = document.getElementById('longitude');
var latitude = 50.715591133433854
var longitude = -3.53485107421875;
var zoom = 16;
var geocoder;
var LatLng = new google.maps.LatLng(latitude, longitude);
var mapOptions =
zoom: zoom,
center: LatLng,
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker(
position: LatLng,
map: map,
title: 'Drag Me!',
draggable: true
);
google.maps.event.addListener(marker, 'dragend', function(marker)
var latLng = marker.latLng;
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
);
$(document).ready(function ()
initialize();
$('#findbutton').click(function (e)
var address = $(PostCodeid).val();
geocoder.geocode( 'address': address , function (results, status)
if (status == google.maps.GeocoderStatus.OK)
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
$(latitude).val(marker.getPosition().lat());
$(longitude).val(marker.getPosition().lng());
else
alert("Geocode was not successful for the following reason: " + status);
);
e.preventDefault();
);
);
【问题讨论】：
您的问题中没有使用地理编码器的代码。你试过什么没用？ 我不知道如何在不破坏此代码的情况下实现地理编码器。我有另一个页面，我在给定地址中放置了一个标记，但我无法获取 lat 和 lng。 您可以发布添加地理编码器的最佳尝试。此时您的问题的答案是 (1.) 添加 google.maps.Geocoder。 (2.) 使用提供的地址调用它，使用返回的坐标在地图上放置一个标记。 您的 HTML 中没有文本字段可将地址放入... 我已经更新了问题，尝试添加地理编码器。 【参考方案1】：-
添加 google.maps.Geocoder。
使用提供的地址调用它，使用返回的坐标在地图上放置一个标记。
获取该标记的坐标
工作sn-p：
var geocoder = new google.maps.Geocoder();
var marker = null;
var map = null;
function initialize()
var $latitude = document.getElementById('latitude');
var $longitude = document.getElementById('longitude');
var latitude = 50.715591133433854
var longitude = -3.53485107421875;
var zoom = 16;
var LatLng = new google.maps.LatLng(latitude, longitude);
var mapOptions =
zoom: zoom,
center: LatLng,
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
map = new google.maps.Map(document.getElementById('map'), mapOptions);
if (marker && marker.getMap) marker.setMap(map);
marker = new google.maps.Marker(
position: LatLng,
map: map,
title: 'Drag Me!',
draggable: true
);
google.maps.event.addListener(marker, 'dragend', function(marker)
var latLng = marker.latLng;
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
);
initialize();
$('#findbutton').click(function (e)
var address = $("#Postcode").val();
geocoder.geocode( 'address': address , function (results, status)
if (status == google.maps.GeocoderStatus.OK)
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
$(latitude).val(marker.getPosition().lat());
$(longitude).val(marker.getPosition().lng());
else
alert("Geocode was not successful for the following reason: " + status);
);
e.preventDefault();
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="text" id="latitude" placeholder="latitude">
<input type="text" id="longitude" placeholder="longitude">
<div id="map" style="width:500px; height:500px"></div>
<p><input class="postcode" id="Postcode" name="Postcode" type="text" value="New York, NY">
<input type="submit" id="findbutton" value="Find" /></p>【讨论】：
那将是另一个问题。你包括地方图书馆吗？以上是关于是否可以将地图中可拖动标记的纬度和经度（使用 javascript）转换为 HTML 表单？的主要内容，如果未能解决你的问题，请参考以下文章