<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高德地圖</title>
</head>
<body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<body style="background:#f9f9f9; margin:0 auto">
<div class="map" style="float: left;">
<div id="container" style="height: 557px;width: 100%"></div>
<div id="myPageTop">
<table>
<tr>
<td>
<label>請輸入關鍵字：</label>
</td>
</tr>
<tr>
<td>
<input id="tipinput"/>
</td>
</tr>
</table>
</div>
<div class="input-card" style='width:28rem;'>
<label style='color:grey'>地理編碼，根據地址獲取經緯度座標</label>
<div class="input-item">
<div class="input-item-prepend"><span class="input-item-text" >地址</span></div>
<input id='address' type="text" value='' >
</div>
<div class="input-item">
<div class="input-item-prepend"><span class="input-item-text">經緯度</span></div>
<input id='coordinate' value="" disabled type="text">
</div>
<input id="regeo" type="button" class="btn" value="搜索" />
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--引入高德地圖JSAPI -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key值&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"></script>
<!--引入UI組件庫（1.0版本） -->
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js" ></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js" ></script>
<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<script type="text/javascript">
var map = new AMap.Map("container", {
resizeEnable: true
});
//輸入提示
var autoOptions = {
input: "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: map
});
//點擊地圖上的點標記
AMap.event.addListener(placeSearch,"markerClick",function(e) {
$('#coordinate').val(e.data.location);
$('#address').val(e.data.name);
});
//構造地點查詢類
AMap.event.addListener(auto, "select", select);//註冊監聽，當選中某條記錄時會觸發
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //關鍵字查詢查詢
}
var geocoder = new AMap.Geocoder({
city: "全國", //城市設爲北京，默認：“全國”
});
var marker = new AMap.Marker();
map.getAllOverlays();
var marker = new AMap.Marker();
function regeoCode() {
var lnglat = document.getElementById('coordinate').value.split(',');
map.add(marker);
marker.setPosition(lnglat);
geocoder.getAddress(lnglat, function(status, result) {
if (status === 'complete'&&result.regeocode) {
var address = result.regeocode.formattedAddress;
document.getElementById('address').value = address;
}else{
log.error('根據經緯度查詢地址失敗')
}
});
}
map.on('click',function(e){
document.getElementById('coordinate').value = e.lnglat;
regeoCode();
})
document.getElementById("regeo").onclick = regeoCode;
document.getElementById('coordinate').onkeydown = function(e) {
if (e.keyCode === 13) {
regeoCode();
return false;
}
return true;
};
</script>
</body>
</html>
實現效果
