在线加载高德地图
html代码
地图显示
获取地图级别与中心点坐标
当前级别:11
当前中心点:113.257069, 23.119684
map.js代码
// 加载地图
var map = map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 5, //初始化地图层级
center: [113.257069, 23.119684] //初始化地图中心点
});
function mapLoad() {
return new Promise((resolve, reject) => {
var markerList = [];
var marker = new AMap.Marker({
position: new AMap.LngLat(112.881284, 23.124554),
title: '三水污水厂'
});
markerList.push(marker);
marker = new AMap.Marker({
position: new AMap.LngLat(112.857109, 23.051909),
title: '白坭污水厂'
});
markerList.push(marker);
map.add(markerList);
map.on("complete", function() {
resolve("地图加载完成!");
});
//绑定地图移动与缩放事件
map.on('moveend', logMapinfo);
map.on('zoomend', logMapinfo);
});
};
async function init() {
let res = await mapLoad();
console.log(res);
};
// 构造矢量圆形
var circle = new AMap.Circle({
center: new AMap.LngLat("116.403322", "39.920255"), // 圆心位置
radius: 1000, //半径
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0.35 //填充透明度
});
//为覆盖物的添加与移除绑定事件
/*
添加覆盖物
document.querySelector("#add-circle").onclick = function() {
map.add(circle);
map.setFitView();
}
删除覆盖物
document.querySelector("#remove-circle").onclick = function() {
map.remove(circle);
map.setFitView();
}
*/
/* // 构造官方卫星、路网图层
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer = new AMap.TileLayer.RoadNet();
//批量添加图层
map.add([satelliteLayer, roadNetLayer]);
//事件绑定
document.querySelector("#add-satellite-layer").onclick = function() {
map.add(satelliteLayer);
}
document.querySelector("#remove-satellite-layer").onclick = function() {
map.remove(satelliteLayer);
}
document.querySelector("#add-roadnet-layer").onclick = function() {
map.add(roadNetLayer);
}
document.querySelector("#remove-roadnet-layer").onclick = function() {
map.remove(roadNetLayer);
}
*/
//显示地图层级与中心点信息
function logMapinfo() {
var zoom = map.getZoom(); //获取当前地图级别
var center = map.getCenter(); //获取当前地图中心位置
document.querySelector("#map-zoom").innerText = zoom;
document.querySelector("#map-center").innerText = center.toString();
};