Vue3+ts项目中怎么使用高德地图呢？

最新推荐文章于 2025-03-09 17:15:32 发布

lengfneg_hao

最新推荐文章于 2025-03-09 17:15:32 发布

阅读量1.5k

点赞数 1

文章标签： vue.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/weixin_55973411/article/details/132390523

版权

密钥请在官网中申请

高德官网:https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1

1.安装Loader

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

yarn add @amap/amap-jsapi-loader --save

pnpm add @amap/amap-jsapi-loader --save

2.创建地图容器

<template>
  <div id="container"></div>
</template>

3.设置地图容器样式

<style scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>

4.引入JS API Loader

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

5.创建地图地图初始化函数 initMap()


  const initMap=()=>{
    AMapLoader.load({
      key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填
      version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap)=>{
      this.map = new AMap.Map("container",{  //设置地图容器id
        viewMode:"3D",    //是否为3D地图模式
        zoom:5,           //地图的缩放比例
        mapStyle: 'amap://styles/whitesmoke', //地图的样式
        center:[105.602725,37.076636], //初始化地图中心点位置
      });
    }).catch(e=>{
      console.log(e);
    })
  },
  // 获取到dom后在创建地图
  onMounted(async () => {
    initMap()
})

6.如果高德地图使用的时2.0版本的话需要配值安全密钥

window._AMapSecurityConfig = {
  securityJsCode: '您申请的安全密钥'
}

注意:直接写这段可能会报错，因为window下没有_AMapSecurityConfig这个属性的，需要手动配置，创建一个global.d.ts文件写入一下代码即可

interface Window {
  _AMapSecurityConfig: {
    securityJsCode: string
  }
}