开发中的高德地图简单应用

最新推荐文章于 2025-03-31 18:14:30 发布

原创

最新推荐文章于 2025-03-31 18:14:30 发布 · 405 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

1、在高德地图的官网申请key并在开发中引入key

2、在代码中放入一个id标签的盒子，用以放入高德地图

3、实例化高德地图对象

var map = new AMap.Map('id',{
    zoom:12,   //地图的放大缩小比例，切记在接口中拿到坐标后再实例化高德地图，否则此数据不生效
    center:[], //地图中心坐标
})

4、放入一个坐标并自定义图标，高德地图默认是蓝色的图标以表示位置区域

            var marker = new AMap.Marker({
                position: new AMap.LngLat(lng,lat),   //图标的经纬度
                offset: new AMap.Pixel(-10, -10),     //图标的位置调整
                icon: '', // 添加 Icon 图标 URL        //图标的路径
            });
            map.add(marker);                          //图标添加到地图

5、给每个图标加一个标注，此标注一直展示

    marker.setLabel({
        direction: "top",   //标注位置
        offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
        content: `<div style='background-color: #ffffff;padding: 2px;border-radius:             
            2px;'>${}</div>` //设置文本标注内容
    });
    ma