博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

在线加载高德地图

Posted on 2021-12-22 11:35  XXLINF  阅读(166)  评论(0)    收藏  举报

html代码

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> -->
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <!-- 加载地图JSAPI脚本 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=*********"></script>
    <script src="map.js"></script>

    <div class="info">
        <h4>获取地图级别与中心点坐标</h4>
        <p>当前级别：<span id="map-zoom">11</span></p>
        <p>当前中心点：<span id="map-center">113.257069, 23.119684</span></p>
    </div>

    <script>
        init();
    </script>
</body>

</html>

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