通用
根据覆盖物调整地图范围
地图上覆盖物较多的情况下,如果需要保证所有覆盖物都在视野范围内, 需要将地图调整到合适的缩放等级和中心点,我们可以调用setFitView()方法,以实现该效果。
// 创建两个点标记
var m1 = new AMap.Marker({
position: [116.49, 39.9]
});
var m2 = new AMap.Marker({
position: [116.29, 39.9]
});
var m3 = new AMap.Marker({
position: [116.69, 39.9],
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
});
map.add(m1);
map.add(m2);
map.add(m3);
//自动适配到指定视野范围
document.querySelector("#fitblue").onclick = function(){
map.setFitView([m1, m2]);
}
//无参数时,自动自适应所有覆盖物
document.querySelector("#fitall").onclick = function(){
map.setFitView();
}
添加一个或多个覆盖物
利用 map 的 add 方法在地图上添加点、线、面等覆盖物。
// 创建点覆盖物
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]);
};
移除一个或多个覆盖物
利用 map 的 remove 方法,移除地图上一个或多个覆盖物。
// 绑定移除一个覆盖物事件
removeOneOverlayButton.onclick = function () {
map.remove(marker);
};
// 绑定移除多个覆盖物事件
removeSeveralOverlayButton.onclick = function () {
map.remove([polyline, polygon]);
};
清除所有覆盖物
清除地图上所有已添加的覆盖物。
// 清除地图上所有添加的覆盖物
map.clearMap();
获取某类覆盖物(获取矢量要素的坐标)
当地图上出现多种覆盖物类型的时候,获取某类覆盖物的方式。
// 获取某类型的覆盖物
var overlays = map.getAllOverlays(type);
// 获取overlays坐标
var position = type == 'marker' ? overlays[0].getPosition() : overlays[0].getPath()[0];
if(type == 'marker') {
console.log(overlays[0].getPosition());
} else {
console.log(overlays[0].getPath());
}
var infoWindow = new AMap.InfoWindow({
position: position,
offset: type == 'marker' ? new AMap.Pixel(0, -35) : new AMap.Pixel(0, -5),
content: '<div>已获取' + info[type] + '覆盖物</div>'
});
infoWindow.open(map);
本例中type可选值有:‘marker’、‘polyline’、‘polygon’
获取某个覆盖物(属性查询)
利用 extData 属性给覆盖物添加 id,获取特定的覆盖物。
var lnglats = [
[116.39, 39.92],
[116.41, 39.93],
[116.43, 39.91],
[116.46, 39.93]
];
var markers = [];
// 遍历坐标点,生成多个点图标
for (var i = 0; i < lnglats.length; i++) {
var lnglat = lnglats[i];
// 创建点实例
var marker = new AMap.Marker({
position: new AMap.LngLat(lnglat[0], lnglat[1]),
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b' + (i + 1) + '.png',
//用户自定义属性
extData: {
id: i + 1
}
});
markers.push(marker);
}
// 将点添加到地图
map.add(markers);
// 获取当前 id 的覆盖物
function getOneOverlay() {
var targetId = 2;
var targetMarker;
for (var i = 0; i < markers.length; i++) {
// 获取存在每个 extData 中的 id
var id = markers[i].getExtData().id;
if (id === targetId) {
targetMarker = markers[i];
break;
}
}
var position = targetMarker.getPosition();
var infoWindow = new AMap.InfoWindow({
position: position,
offset: new AMap.Pixel(0, -35),
content: '<div>已获取 id 为 2 覆盖物</div>'
});
infoWindow.open(map);
}