vue-cli+高德地图

目录

first:

second:

third:


first:

前往高德地图开放平台注册key           https://lbs.amap.com/ 

需要注意的是,我这边用的是 如果是自己的项目使用,注册个人认证的就行  公司用的需要去购买企业认证,不然每天api访问次数有限制。


second:

安装高德地图依赖:npm i @amap/amap-jsapi-loader --save

引入

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


third:

上代码:

<template>
  <div id="app">
    <!-- 地图容器 -->
    <div id="container"></div>
  </div>
</template>

创建一个map接收, 填入平台注册的key:

<script>
// 引入loader
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      map: null, // 用于接收
    };
  },
  created() {
    this.getmap();
  },
  methods: {
    getmap() {
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key
        version: "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
      })
        .then((AMap) => {
          // 在data中声明的map
          this.map = new AMap.Map("container");
        })
        .catch();
    },
  },
};
</script>
<style scoped>
#container {
  width: 1000px;
  height: 600px;
  margin: 100px auto;
}
</style>>

另外,

可直接在new aMap.map这直接定义地图的一些属性: 语言,创建点坐标,视图,级别等

methods: {
    getmap() {
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key
        version: "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
      })
        .then((AMap) => {
          // 在data中声明的map
          this.map = new AMap.Map("container",{
            lang: "zh_en",  // en,zh_en, zh_cn 可选
            center: [116.40, 39.90],     // 【 东经,北纬 】
            viewMode:'3D', // 使用3D视图 不写默认2D视图
            zoom: 13, // 级别
          });
        })
        .catch();
    },
  },


最终效果:


更多功能详细见官方文档: https://lbs.amap.com/api/javascript-api/guide/abc/load~

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>