vue3项目使用高德地图AMap详细步骤

1 注册登录高德地图api账号

高德开发平台

点击控制台 进入开发者模式

2 去创建应用 获得apikey【安全密钥】 （我创建的是Web端使用JS API1.4.15版本）

【‘注意】我们需要的是安全密钥，而不是key

3 vue3项目引入AMap

1. 在public目录下的index.html 页面引入在head标签中

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'安全密钥', 
    }
</script>
<script type="text/javascrip t" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script> 

3. 安装依赖

   npm install vue-amap --save
   

4. 配置amap 防止报amap找不到的错误

   "globals": {
         "AMap": true
       },
   

5. 在项目中使用示例

   <div id="map-container" style="width: 100%; height: 100vh;"></div>
   

   data() {
       return {
           map: undefined, // 初始化 map
           }
       }
   

   mounted() {
   this.map = new AMap.Map('map-container', {
      zoom: 10,
      center: this.center,
      doubleClickZoom: false,
      mapStyle: 'blue_night',
      features: ['bg', 'point']
   });
   

6. 接下来就是各种绘制，over啦（后续更细）

7. 下面附上高德skd的 开发文档

   地图js API 2.0

​