高德地圖 自動定位+拖拽選址 +搜尋選址
功能：使用高德地圖實現自動定位，以及客戶拖拽選址和搜尋指定地址的功能
條件：引入高德地圖及相關js檔案
效果：
js:
var lat,lng
AMapUI.loadUI(['misc/PositionPicker','misc/PoiPicker'], function(PositionPicker,PoiPicker) {
var map = new AMap.Map('container', {
zoom:14,
scrollWheel: false
});
var poiPicker = new PoiPicker({
input: 'search',
placeSearchOptions: {
map: map,
pageSize: 6 //關聯搜尋分頁
}
});
// 載入定位外掛，實現定位功能
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，預設:true
timeout: 10000, //超過10秒後停止定位，預設：無窮大
maximumAge: 0, //定位結果快取0毫秒，預設：0
showMarker: true, //定位成功後在定位到的位置顯示點標記，預設：true
showCircle: true, //定位成功後用圓圈表示定位精度範圍，預設：true
panToLocation: true, //定位成功後將定位到的位置作為地圖中心點，預設：true
zoomToAccuracy:true //定位成功後調整地圖視野範圍使定位位置及精度範圍視野s內可見，預設：false
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位資訊
AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯資訊
});
// 搜尋選址
poiPicker.hideSearchResults();
lat=poiResult.item.location.lat
lng=poiResult.item.location.lng
$('.poi .nearpoi').text(poiResult.item.name)
$('.address .info').text(poiResult.item.address)
map.panTo([lng,lat]);
});
function onComplete(data) {
$('#address').val(data.formattedAddress)
$('.address .info').text(data.formattedAddress)
}
//解析定位錯誤資訊
function onError(data) {
$('.address .info').text('定位失敗！');
}
var positionPicker = new PositionPicker({
mode: 'dragMap',
map: map
});
// 拖拽選址
positionPicker.on('success', function(positionResult) {$('.poi .nearpoi').text(positionResult.nearestPOI)
$('.address .info').text(positionResult.address)
$('#address').val(positionResult.address)
});
positionPicker.on('fail', function(positionResult) {
$('.poi .nearpoi').text('')
$('.address .info').text('')
});
var onModeChange = function(e) {
positionPicker.setMode(e.target.value)
}
positionPicker.start();
map.panBy(0, 1);
map.addControl(new AMap.ToolBar({
liteStyle: true
}))
});
function sub(){
// 提交地址相關操作
}
css:
body {
height: 100%;
margin: 0;
width: 100%;
padding: 0;
overflow: hidden;
font-size: 13px;
}
p{
margin: 0;
padding: 0;
}
#container{
height:100vh;
width: 100vw;
margin: 0 auto;
}
#tip {
background-color: #fff;
padding-left: 3%;
padding-right: 3%;
position: fixed;
left: 0;
top: 0;
width: 94%;
line-height: 2.5rem;
height: 2.5rem;
border: none;
border-bottom: 1px solid #eee;
z-index: 19999;
}
#tip input{
width: 85%;
height: 2rem;
line-height: 2rem;
border: none;
outline: none;
}
#tip span{
width: 15%;
text-align: center;
height: 2.5rem;
line-height: 2.5rem;
color: #757575;
}
#addressDels{
position: absolute;
width: 100%;
bottom: 0;
left: 0;
z-index: 9999;
background: #fff;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
#addressDels li{
width: 100%;
line-height: 2rem;
height: 2rem;
}
#addressDels .poi span,.left span{
display: block;
float: left;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ea5413;
line-height: 2rem;
margin-top: calc(1rem - 4px);
margin-top: -moz-calc(1rem - 4px);
margin-top: -webkit-calc(1rem - 4px);
margin-left: 3%;
margin-right: 3%;
}
.left span{
margin-left: 2.85vw;
margin-right: 2.85vw;
}
#addressDels li p{
line-height: 2rem;
overflow: hidden;
float: left;
}
#addressDels .poi{
width: 100%;
line-height: 2rem;
height: 2rem;
}
.left{
width: 80%;
line-height: 2rem;
overflow: hidden;
float: left;
}
.left div,.poi div{
width: 100%;
line-height: 2rem;
overflow: hidden;
}
.left .info{
width: calc(100% - 5.7vw - 8px);
width: -webkit-calc(100% - 5.7vw - 8px);
width: -moz-calc(100% - 5.7vw - 8px);
}
#addressDels li a{
display: block;
float: right;
margin-right: 2%;
margin-left: 2%;
width: 16%;
height: 1.4rem;
line-height: 1.4rem;
background: #ea5413;
color: #fff;
text-align: center;
border-radius: 5px;
margin-top: 0.3rem;
text-decoration: none;
}
html:
<div id="container" class="map" tabindex="0"></div>
<div id='tip'>
<input type="text" name="search" id="search" value="" placeholder="輸入關鍵字搜尋地址"/>
<span>取消</span>
</div>
<ul id="addressDels">
<li class="poi">
<div>
<span></span>
<p class="nearpoi"></p>
</div>
</li>
<li class="address">
<div class="left">
<div>
<span></span>
<p class="info"></p>
</div>
</div>
<a href="#" onclick="sub()">確定</a>
</li>
</ul>