一、创建vue2项目（细节步骤不做赘述）
vue create vue-map
二、将vue2项目初始化（删掉不需要的代码，包括配置）
三、下载Element-ui 并引入
下载地址： element.eleme.cn/#/zh-CN
四、下载高德地图插件
-
申请后台账号
-
添加应用
-
-
下载
npm i @amap/amap-jsapi-loader -S
五、使用
引入：import AMapLoader from '@amap/amap-jsapi-loader'
安全密钥的引入：
window._AMapSecurityConfig = { securityJsCode: '0bd5a257e25c73ca88cb18f8edc0eb7a'}html结构定义地图容器： <div id="container"></div>并创建地图实例：
AMapLoader.load({ key: '你申请的key', version: '2.0', plugins: [''] }).then(AMap=>{ this.map = new AMap.Map('container',{ // 设置地图容器id viewMode: "3D", //是否为3D地图模式 zoom: 17, //初始化地图级别 pitch:0, // 地图俯仰角度，有效范围 0 度- 83 度 center: [107.962646,27.834868]//初始化地图中心区域 ,resizeEnable: true })
六、地图效果展示
七、完整代码：
<template> <div> <div id="container"></div> </div></template><script>import AMapLoader from '@amap/amap-jsapi-loader'window._AMapSecurityConfig = { securityJsCode: '安全密钥'}export default { name: 'HelloWorld', data(){ return{ // 初始化地图实例 map: null } }, mounted(){ this.initMap() }, methods:{ initMap(){ AMapLoader.load({ key: '申请的key', version: '2.0', // plugins: [''] }).then(AMap=>{ this.map = new AMap.Map('container',{ // 设置地图容器id viewMode: "3D", //是否为3D地图模式 zoom: 17, //初始化地图级别 center: [107.962646,27.834868]//初始化地图中心区域 ,resizeEnable: true }) }).catch(e=>{ console.log(e); }) }, }, beforeDestroy () { // 销毁地图 if (this.map) this.map.destroy() },}</script><style scoped>#container{ width: 100%; height: 90vh;}.search{ display: flex; justify-content: space-between;}</style>
八、总结：
- 地图容器需要加宽度和高度，不然会报错
- key的引入有以下两种：
-
1.AMapLoader.load({ key: '申请的key', version: '2.0', // plugins: [''] }) 2.<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
九、项目开源地址：gitee.com/li-zucheng/…
制作不易，如果对您有帮助希望给个关注点点赞，就是对我最大的鼓励，如果有不对的请下方评论提出
