拖拽选址
html,
body {
height: 100%;
margin: 0;
width: 100%;
padding: 0;
overflow: hidden;
font-size: 13px;
}
.map {
height: 100%;
width: 60%;
float: left;
}
#right {
color: #444;
background-color: #f8f8f8;
width: 40%;
float: left;
height: 100%;
}
#start,
#stop,
#right input {
margin: 4px;
margin-left: 15px;
}
.title {
width: 100%;
background-color: #dadada
}
button {
border: solid 1px;
margin-left: 15px;
background-color: #dadafa;
}
.c {
font-weight: 600;
padding-left: 15px;
padding-top: 4px;
}
#lnglat,
#address,
#nearestJunction,
#nearestRoad,
#nearestPOI,
.title {
padding-left: 15px;
}
选择模式
拖拽地图模式
拖拽Marker模式
开始选点
关闭选点
选址结果 经纬度: 地址: 最近的路口: 最近的路: 最近的POI:
AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
var map = new AMap.Map('container', {
zoom: 16,
scrollWheel: false
})
var positionPicker = new PositionPicker({
mode: 'dragMap',
map: map
});
positionPicker.on('success', function(positionResult) {
document.getElementById('lnglat').innerHTML = positionResult.position;
document.getElementById('address').innerHTML = positionResult.address;
document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;
document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad;
document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI;
});
positionPicker.on('fail', function(positionResult) {
document.getElementById('lnglat').innerHTML = ' ';
document.getElementById('address').innerHTML = ' ';
document.getElementById('nearestJunction').innerHTML = ' ';
document.getElementById('nearestRoad').innerHTML = ' ';
document.getElementById('nearestPOI').innerHTML = ' ';
});
var onModeChange = function(e) {
positionPicker.setMode(e.target.value)
}
var startButton = document.getElementById('start');
var stopButton = document.getElementById('stop');
var dragMapMode = document.getElementsByName('mode')[0];
var dragMarkerMode = document.getElementsByName('mode')[1];
startButton.addEventListener('click', function() {
positionPicker.start(map.getBounds().getSouthWest())
})
stopButton.addEventListener('click', function() {
positionPicker.stop();
})
dragMapMode.addEventListener('change', onModeChange)
dragMarkerMode.addEventListener('change', onModeChange);
positionPicker.start();
map.panBy(0, 1);
map.addControl(new AMap.ToolBar({
liteStyle: true
}))
});
