高德地图API入门使用vue

丿BAIKAL巛2024-05-01 20:12

文章目录

最终效果

页面显示高德地图

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

在高德的开放平台申请key： https://console.amap.com/dev/key/app

申请的类型为web端（js api）

否则会报错：<AMap JSAPI> KEY异常，错误信息：USERKEY_PLAT_NOMATCH

二、下载依赖：

npm install @amap/amap-jsapi-loader

三、完整代码

vue 复制代码

<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>