我有一个谷歌地图，包含城市字段，地址和GPS坐标字段。我想从输入的地址中找到/显示GPS坐标，反之亦然。我希望能够通过在地图上移动标记来显示字段上的数据。 我做了地理编码和地理编码倒置，但我不能把它放在指定的地址。我无法通过单击地图的其他区域来移动标记。 我清楚了吗？你能帮助我吗 ？这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="__CSS__/main.css">
<style type="text/css">
.content{width:600px; height: 350px;margin: 10px auto;}
.content table{width: 100%}
.content table td{vertical-align: middle;}
#city,#address{height:21px;background: #FFF;border:1px solid #d7d7d7; line-height: 21px;}
#city{width:60px}
#address{width:130px}
#is_dynamic_label span{vertical-align:middle;margin: 3px 0px 3px 3px;}
#is_dynamic_label input{vertical-align:middle;margin: 3px 3px 3px 50px;}
</style>
<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=021c8fdab28e1941b3649ff34d23cd05"></script>-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASjqBUWgtGv5RHh_jMYFxRJmYvrGhfRIc&callback=initMap">
</script>
<script type="text/javascript" src="__JS__/jquery.js"></script>
<title>Affichage de la carte</title>
</head>
<body>
<div class="content">
<table>
<tr>
<td width="130"><var id="lang_city"></var>Ville：<input id="city" type="text" /></td>
<td width="190"><var id="lang_address"></var>Adresse：<input id="address" type="text" value="" /></td>
<td><input id ="submit" class="formInput01" type="button" value="Ok"></a></td>
</tr>
<tr>
<td>Latitude：<a id="lat"></a></td>
<td>Longitude：<a id="lng"></a></td>
<td>Lieu actuelle：<a id="_address"></a></td>
</tr>
</table>
<input type="hidden" value="{$_GET['id']}" name="id" id="id">
<div style="width:100%;height:340px;margin:5px auto;border:1px solid gray" id="container"></div>
<script>
/* Déclaration des variables */
var geocoder;
var map;
var marker = null;
var elevator;
function initMap() {
var latlng = new google.maps.LatLng(48.866667, 2.333333); // Paris
var map = new google.maps.Map(document.getElementById('container'), {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: latlng
});
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
alert("Le geocodage n\'a pu etre effectue pour la raison suivante: " + status);
}
});
}
function geocodeLatLng(geocoder, map, infowindow) {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[1]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
</script>
</div>
<!--
<script type="text/javascript">
var map = new BMap.Map("container"),marker,point,styleStr,
lat = document.getElementById('lat'),
lng = document.getElementById('lng'),
_address = document.getElementById('_address'),
id = document.getElementById('id');
var api = frameElement.api, W = api.opener,
_lat = W.document.getElementById('lat'),
_lng = W.document.getElementById('lng'),
p_address = W.document.getElementById('address');
map.enableScrollWheelZoom();
map.enableContinuousZoom();
function doSearch(){
if (!document.getElementById('city').value) {
alert('Vous n\'avez pas entré la ville！');
return;
}
var search = new BMap.LocalSearch(document.getElementById('city').value, {
onSearchComplete: function (results){
if (results && results.getNumPois()) {
var points = [];
for (var i=0; i<results.getCurrentNumPois(); i++) {
points.push(results.getPoi(i).point);
}
if (points.length > 1) {
map.setViewport(points);
} else {
map.centerAndZoom(points[0], 13);
}
point = map.getCenter();
} else {
alert(lang.errorMsg);
}
}
});
search.search(document.getElementById('address').value || document.getElementById('city').value);
}
function init(e){
var geolocation = new BMap.Geolocation();
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("Paris"); // capital de France
if(_lat.value && _lng.value){
lat.innerHTML = _lat.value;
lng.innerHTML = _lng.value;
//
var point = new BMap.Point(_lng.value,_lat.value);
map.centerAndZoom(point, 18);
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
_address.innerHTML =(addComp.province+ addComp.city+ addComp.district + addComp.street + addComp.streetNumber);
});
var marker = new BMap.Marker(point);// 创建标注
map.addOverlay(marker); // 将标注添加到地图中
}else{
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
map.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), 18); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity(r.address.city);
}
else {
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("paris"); // capital de France
}
},{enableHighAccuracy: true});
}
var geoc = new BMap.Geocoder();
map.addEventListener("click", function(e){
map.clearOverlays();
var pt = e.point;
geoc.getLocation(pt, function(rs){
var point = new BMap.Point(rs.point.lng,rs.point.lat);
map.centerAndZoom(point, 18);
var marker = new BMap.Marker(point);// 创建标注
map.addOverlay(marker); // 将标注添加到地图中
lat.innerHTML = rs.point.lat;
lng.innerHTML = rs.point.lng;
_address.innerHTML = rs.address;
});
});
}
init();
document.getElementById('address').onkeydown = function (evt){
evt = evt || event;
if (evt.keyCode == 13) {
doSearch();
}
};
api.button({
id:'ok',
name:'Ok',
callback:function(){
if(!lat.innerHTML && !lng.innerHTML){
alert('Veuillez confirmer l\'adresse actuelle！');
return false;
}
W.document.getElementById('lat').value = lat.innerHTML;
W.document.getElementById('lng').value = lng.innerHTML;
}
});
</script>
--->
</body>
</body>
</html>
答案 0 :(得分：0)
请不要公开您的API密钥，因为这不安全;它允许第三方用完您的配额。为了安全起见，我建议您从示例代码中重新编写API密钥。
我相信我理解你要从你的描述中做什么，我相信我已经完成了它。
首先，我注意到你没有为标记设置draggable为true，这就是你无法拖动标记的原因。
var marker = new google.maps.Marker({
map: map,
draggable: true,
position: latlng
});
您提到希望用户能够从输入的地址显示GPS坐标，反之亦然。为此，我为GPS坐标添加了一个额外的输入字段：
<td width="190"><var id="lang_gps"></var>GPS：<input id="gps" type="text" value="" /></td>
如果您希望用户能够输入GPS坐标或地址，则需要添加逻辑，以便应用知道它是正向还是反向地理编码。为此，我在GPS坐标输入和地址输入中添加了一个点击监听器。如果用户单击GPS文本框，则会清除地址文本框。如果用户点击地址文本框，则会清除GPS坐标文本框：
document.getElementById("address").addEventListener("click", function(){
document.getElementById("gps").value = "";
});
document.getElementById("gps").addEventListener("click", function(){
document.getElementById("address").value = "";
});
当用户点击确定按钮进行地理编码时，应用会检查地址文本框或gps文本框是否有值，然后根据哪个文本框具有值来转发或反向地理编码。
我还需要添加两个动作侦听器。一个用于拖动标记，另一个用于标记拖动结束时。这些填充字段告诉当前地址和lat，lng的位置。
google.maps.event.addListener(marker,'drag',function(event) {
document.getElementById('lat').innerHTML = event.latLng.lat();
document.getElementById('lng').innerHTML = event.latLng.lng();
});
google.maps.event.addListener(marker,'dragend',function(event) {
document.getElementById('lat').innerHTML =event.latLng.lat();
document.getElementById('lng').innerHTML =event.latLng.lng();
geocoder.geocode({'location': marker.getPosition()}, function(results, status) {
if (status === 'OK') {
document.getElementById('_address').innerHTML = results[0].formatted_address;
for(i = 0; i<results[0].address_components.length; i++){
if(results[0].address_components[i].types[0] === "locality"){
document.getElementById('city').value = results[0].address_components[i].long_name;
}
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
});
目前，用户可以输入地址或gps坐标，然后单击“确定”按钮。完成后，Ville字段，纬度字段，经度字段和Lieu actuelle将更新。 Ville显示城市，纬度显示纬度，经度显示经度，Lieu actuelle显示当前标记位置的完整地址。然后，用户可以相应地拖动标记，Ville，Latidue，Longitude和Lieu actuelle字段将相应地更新。
我在JSFiddle上演示了这个，我将在下面链接。请注意，我已经修改了我的API密钥以确保安全性，您需要输入自己的API密钥才能使样本正常工作：
https://jsfiddle.net/4cd0hsxk/1/
我希望这有帮助！