方法一：使用amap-jsapi-loader 插件

步骤1.npm安装插件 npm install @amap/amap-jsapi-loader --save

高德地图的2种引入方式

步骤2. 创建地图组件

高德地图的2种引入方式

vMap/index页面代码如下：

<template><div class="mapContainer" :id="uuid"></div>
</template>
<script>
import { uuid } from "@/utils/tools";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
 data() {
  return {
   uuid: uuid(8),
   map: null,
   viewMode: "3D",
   point: true,
   zoom: 13,
   center: [114.5895, 38.0073],
  };
 },
 created() {
  this.init();
 },
 methods: {
  init() {
   AMapLoader.load({
    key: "1e674dcef92e88c0af90879dc1d41f4b",
    version: "1.4.15",
   }).then((AMap) => {
    this.map = new AMap.Map(this.uuid, {
     mapStyle: "amap://styles/blue",
     viewMode: this.viewMode,
     pitch: 45, //俯仰角度
     resizeEnable: true, //是否监控地图容器尺寸变化
     zooms: [3, 20], //设置地图级别范围
     zoom: this.zoom, //初始化地图层级
     zoomEnable: this.point, // 是否缩放
     scrollWheel: this.point, // 是否支持滚轮缩放
     dragEnable: this.point, // 是否支持鼠标拖拽平移
     jogEnable: true, // 是否支持缓动效果
     buildingAnimation: true, // 模块消失是否有动画效果
     center: this.center, //初始化地图中心点
     lang: "zh_cn",
    });
   });
  },
 },
};
</script>
<style lang="less" scoped>
.mapContainer {
 width: 100%;
 height: 100%;
 //隐藏左下角高德地图logo
 .amap-logo,
 .amap-copyright {
  display: none !important;
 }
}
</style>

注意点：地图组件要有高度，否则无法显示

步骤3.父组件页面使用vMap自定义地图组件

高德地图的2种引入方式

方法二：使用script直接引入

步骤1. 在Public的inde.html文件的script中直接引入

高德地图的2种引入方式

步骤2.在config中配置

 configureWebpack: {
    externals: {
      AMap: "AMap"
    },
  },

高德地图的2种引入方式

步骤3. 创建自定义地图组件

template><div class="mapContainer" :id="uuid"></div>
</template>
<script>
import { uuid } from "@/utils/tools";
import AMap from "AMap"
export default {
 data() {
  return {
   uuid: uuid(16),
   map: null,
   mapMode: "3D",
   city: "裕华区",
   point: true,
   center:[ 114.5522, 38.0011 ]
  };
 },
 mounted() {
  this.init();
 },
 computed: {},
 methods: {
  init() {
   this.map = new AMap.Map(this.uuid, {
    mapStyle: "amap://styles/467551ea881c87ff34f6837df70efee6",
    viewMode: this.mapMode,
    pitch: 45,
    resizeEnable: true, //是否监控地图容器尺寸变化
    zooms: [ 12, 20 ], //设置地图级别范围
    zoom: 10, //初始化地图层级
    zoomEnable: this.point, // 是否缩放
    scrollWheel: this.point, // 是否支持滚轮缩放
    dragEnable: this.point, // 是否支持鼠标拖拽平移
    jogEnable: true, // 是否支持缓动效果
    buildingAnimation: true, // 模块消失是否有动画效果
    center: this.center, //初始化地图中心点
    lang: "zh_cn"
   });
  },
 },
};
</script>
<style lang="less" scoped>
.mapContainer {
 width: 100%;
 height: 100%;
 //隐藏左下角高德地图logo
 .amap-logo,
 .amap-copyright {
  display: none !important;
 }
}
</style>

步骤4.父组件页面使用vMap自定义地图组件

高德地图的2种引入方式

注意：init方法要放在mounted中，不然会提示 Error in created hook: "Error: Map container div not exist"创建挂钩时出错：“错误：映射容器div不存在”,同样div也需要高宽度

附带生成随机id方法：

/**
 * 生成uuid
 * @param len 长度 number
 * @param radix 随机数基数 number
 * @returns { string }
 */
 export const uuid = (len = 16, radix = 62) => {
  const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("")
  const uuid = []
  if (len) {
    for (let i = 0; i < len; i++) {
      uuid[i] = chars[Math.floor(Math.random() * radix)]
    }
  } else {
    let r
    uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-"
    uuid[14] = "4"
    for (let i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = Math.floor(Math.random() * 16)
        uuid[i] = chars[(i === 19) ? ((r % 4) % 8) + 8 : r]
      }
    }
  }
  return uuid.join("")
}
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。