在线加载高德地图


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();
};
js