vue3引用高德地图的详细方法

1.进入高德开放平台，注册账号认证之后，点击控制台

2.点击应用管理--我的应用

3.点击右上角的添加key按钮

4.提交信息之后就会得到一个密钥信息

5.在自己的vue项目中安装loader

npm install @amap/amap-jsapi-loader --save

6.添加一个<div>作为地图的容器

<div class="ditu">
    <div  id="map" style="width:780px; height: 48vh; margin: auto;"></div>
</div>

7.组件引入

import AMapLoader from '@amap/amap-jsapi-loader'; 

8.初始化地图

const map=ref(null)
onMounted(() => {
    AMapLoader.load({
    key:"",   //你自己申请的密钥
    version:'2.0',
    }).then((AMap)=>{
      map.value=new AMap.Map('map',{
        zoom:15,
        center:[120.130003,30.259594], 
      }); 
      }).catch(e=>{
        console.error(e)
      })
}

9.添加标记点

    AMapLoader.load({
    key:"", //你自己申请的密钥
    version:'2.0',
    }).then((AMap)=>{
      map.value=new AMap.Map('map',{
        zoom:15,
        center:[120.130003,30.259594], 
      }); 
      const icon = new AMap.Icon({  
            image:'https://img1.baidu.com/it/u=2631315538,1989073605&fm=253&fmt=auto&app=138&f=JPEG?w=488&h=488', 
            size: new AMap.Size(70, 70),
            imageSize:new AMap.Size(70, 70),
            offset: new AMap.Pixel(0, 0) 
        });  
        const marker = new AMap.Marker({  
            position:[120.130003,30.259594], 
            icon: icon,  
            map: map.value 
        });
      }).catch(e=>{
        console.error(e)
      })

10.可以给标记点添加点击事件

marker.on('click', function() {
    console.log("你点击了标记点")
});

11.也可以在当前图层上添加各类图层，如卫星图层，路况图层

var layer1 = new AMap.TileLayer.Satellite();
var layer2 =  new AMap.TileLayer.RoadNet();
var layers = [
    layer1,
    layer2
]
 map.value.add(layers);

12.重置图层，使用setLayers()方法后，地图图层会被重置

map.value.setLayers(layers);

13.可以通过remove()方法移除图层

map.value.remove(layer1);