VUE中引入高德地图并使用步骤

最新推荐文章于 2023-01-06 11:15:28 发布

南方姑娘-qing

最新推荐文章于 2023-01-06 11:15:28 发布

阅读量433

点赞数

分类专栏：高德地图文章标签： vue.js

本文链接：https://blog.csdn.net/csdn_cai_csdn/article/details/127919112

版权

高德地图专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Vue项目中集成高德地图API，包括申请密钥、安装必要的依赖包、配置安全秘钥及初始化地图显示等功能。通过具体代码示例，帮助开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、高德地图开放平台申请key

高德开放平台

进入控制台
我的应用中创建新应用
添加key
填写信息，提交
记住key和安装秘钥，后面项目中会用到

二、vue项目中使用

安装loader和amap

npm i @amap/amap-jsapi-loader -S
npm i vue-amap -S

使用

import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
    securityJsCode: '输入安全秘钥'
}
export default {
  data(){
    return{
      zoom: 18, // 缩放比例
      position:{
        longitude: 115.383020,
        latitude: 39.955792
      },
      marker: null,
    }
  },
  components:{Breadcrumb,},
  mounted(){
   this.initMap()
  },
  methods:{
    initMap(){
      AMapLoader.load({
          key: '输入key', 
          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [
              'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Scale', 
              'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 
              'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Driving'
          ] ,   // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          AMapUI: {
              // 是否加载 AMapUI，缺省不加载
              version: "1.1", // AMapUI 缺省 1.1
              plugins: [], // 需要加载的 AMapUI ui插件
          },
      }).then(AMap => {
          this.map = new AMap.Map('map', {
            //设置地图容器id
            // viewMode: '3D', //是否为3D地图模式
            zoom: this.zoom, //初始化地图级别
            center: [this.position.longitude, this.position.latitude]  //初始化地图中心点位置
          })

          this.marker = new AMap.Marker({
            map: this.map,
            position: [this.position.longitude, this.position.latitude],
          })

          
      }).catch(e => {
          console.log(e)
      })
    }
  }
}
</script>