android 高德拖拽地图定位,拖拽选址-拖拽选址-示例中心-JS API UI 组件示例 | 高德地图API...

拖拽选址

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

}))

});