高德地图API入门使用vue

最新推荐文章于 2025-06-17 15:45:48 发布

丿BAIKAL巛

最新推荐文章于 2025-06-17 15:45:48 发布

阅读量982

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Gis 前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/Keep__Me/article/details/138322680

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

Gis

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中集成高德地图，包括在高德开放平台申请web端key，下载并使用AMap-jsapi-loader，以及提供了一个包含完整代码的示例。

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

文章目录

最终效果

页面显示高德地图
在这里插入图片描述

一、在高德的开放平台申请key

在高德的开放平台申请key： https://console.amap.com/dev/key/app
申请的类型为web端（js api）
否则会报错：<AMap JSAPI> KEY异常，错误信息：USERKEY_PLAT_NOMATCH
在这里插入图片描述

二、下载依赖：

npm install @amap/amap-jsapi-loader

三、完整代码


<template>  
    <div>      <div id="container" ref="amap"></div>  
    </div></template>  
  
<script>  
  import AMapLoader from '@amap/amap-jsapi-loader';  
  export default {  
    name: "Class",  
    data() {  
      return {  
  
      };  
    },  
    created() {  
      this.initAMap();  
  
  
  
    },  
    methods: {  
  
      initAMap() {  
        AMapLoader.load({  
          key: '', // 申请好的key
          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15          plugins: []  // 需要使用的的插件列表，如比例尺'AMap.Scale'等，如果是地图控件，必须再 map.addControl添加  
        })  
          .then((AMap) => {  
            this.map = new AMap.Map('container', {  
              // 设置地图容器id  
              //viewMode: '3D', // 默认2d地图模式  
              zoom: 12, // 初始化地图级别  
              zooms: [5, 30], // 地图缩放范围  
              // 可以设置初始化当前位置  
              center: [116.397428, 39.90923] // 初始化地图位置  
            })  
          })  
      },  
  
  
    }  
  };  
</script>  
  
<style scoped lang="scss">  
  #container {  
    padding: 0px;  
    margin: 0px;  
    width: 100%;  
    height: 900px;  
  }  
</style>