高德地图 自动定位+拖拽选址 +搜索选址
功能：使用高德地图实现自动定位，以及客户拖拽选址和搜索指定地址的功能
条件：引入高德地图及相关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)
$('#address').val(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:
取消