android 高德地图 自定义覆盖物,添加一个或多个覆盖物

添加一个或多个覆盖物

html, body, #container {

height: 100%;

width: 100%;

}

.amap-icon img {

width: 25px;

height: 34px;

}

.input-card .btn {

width: 9rem;

}

.input-card .btn:first-child {

margin-right: 1.3rem;

}

添加覆盖物

// 创建地图实例

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

zoom: 13,

center: [116.43, 39.92],

resizeEnable: true

});

// 创建点覆盖物

var marker = new AMap.Marker({

position: new AMap.LngLat(116.39, 39.92),

icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',

offset: new AMap.Pixel(-13, -30)

});

var polylinePath = [

new AMap.LngLat(116.41, 39.93),

new AMap.LngLat(116.43, 39.91)

];

// 创建线覆盖物

var polyline = new AMap.Polyline({

path: polylinePath

});

var polygonPath = [

new AMap.LngLat(116.46, 39.93),

new AMap.LngLat(116.44, 39.91),

new AMap.LngLat(116.49, 39.91)

];

// 创建面覆盖物

var polygon = new AMap.Polygon({

path: polygonPath

});

var addOneOverlayButton = document.getElementById('addOneOverlay');

var addSeveralOverlayButton = document.getElementById('addSeveralOverlay');

// 绑定添加一个覆盖物事件

addOneOverlayButton.onclick = function () {

map.add(marker);

};

// 绑定添加多个覆盖物事件

addSeveralOverlayButton.onclick = function () {

map.add([polyline, polygon]);

};