位置: IT常识 - 正文

高德地图的2种引入方式(高德地图的2种导航方式)

发布时间：2024-01-20

方法一：使用amap-jsapi-loader 插件步骤1. npm安装插件 npm install @amap/amap-jsapi-loader --save 步骤2. 创建地图组件 vMap/index页面代码如下： <template> <div class="mapContainer" ... 方法一：使用amap-jsapi-loader 插件步骤1.npm安装插件 npm install @amap/amap-jsapi-loader --save

推荐整理分享高德地图的2种引入方式(高德地图的2种导航方式)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:高德地图新玩法,高德地图几种,高德地图各种功能介绍,高德地图几种,高德地图的2种导航模式,高德地图的2种模式,高德地图的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> 高德地图的2种引入方式(高德地图的2种导航方式)

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

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

方法二：使用script直接引入步骤1. 在Public的inde.html文件的script中直接引入

步骤2.在config中配置 configureWebpack: { externals: { AMap: "AMap" }, },

步骤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自定义地图组件

注意：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("")}