0
都市のフィールド、住所、GPSの座標フィールドを持つGoogleマップがあります。入力した住所から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>