自定义图标

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;

}

AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {

var map = new AMap.Map('container', {

zoom: 16,

scrollWheel: false

})

var positionPicker = new PositionPicker({

mode: 'dragMarker',

map: map,

iconStyle: { //自定义外观

url: '//webapi.amap.com/ui/1.0/assets/position-picker2.png',

ancher: [24, 40],

size: [48, 48]

}

});

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.addControl(new AMap.ToolBar({

liteStyle: true

}))

});