vue-amap

因为项目要求调用高德地图，就按照官方文档按部就班的捣鼓，这一路上出了不少问题。 前言： vue-cli，node环境什么的自己安装设置推荐一个博客：https://blog.csdn.net/wulala_hei/article/details/80488674 1，找一个磁盘，在里面git bash here 然后vue init webpack XXX（文件夹名字） 你 第一步：在test里面安装install 指令：1.npm install 2.npm install vue-amap --save 注意：我在安装的时候总是出现了说找不到webpack的问题， 即：使用 npm run dev 时报错： Error: Cannot find module 'webpack-cli/bin/config-yargs' 可是我用webpack-v找到了版本号，我就删了又装了两三次，还是不行，最后我在安装的过程中没有让其修复，语句不记得了，就是安装过程中出现警告让你输入修复的，然后就成功了。 第二步：在main.js中加入 解释一下，key就是你申请的key，一串数字和字母 plugin是你在地图上用的组件 例： "AMap.Autocomplete", //输入提示插件 "AMap.PlaceSearch", //POI搜索插件 "AMap.Scale", //右下角缩略图插件

一、在vue-cli的框架下的main.js(或者main.ts)中引入高德插件，代码如下： import Vue from 'vue' import VueAMap from 'vue-amap' import ElementUI from 'element-ui' import App from './App.vue' import router from './router' import store from './store' import './registerServiceWorker' Vue.use(VueAMap) Vue.use(ElementUI) VueAMap.initAMapApiLoader({ // 高德的key key: '你的高德key', // 插件集合 plugin: [ 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geocoder', 'AMap.Geolocation' ], // 高德 sdk 版本，默认为 1.4.4 v: '1.4.10' }) Vue.config

p.s.网上高德结合echarts资源太少了，一整还得交学费下载-。-，本着前人栽树后人乘凉的高尚品德，把我实现的免费版放出来，希望我的这篇文章可以满足广大伸手党（我也是）复制即用的心态，毕竟这也不涉及啥高深原理，满足工作所需就足够了。 效果图 步骤 首先你得有高德api的key 传送门： lbs.amap.com/api/android… 现在vue里引入高德地图 这里我要絮叨几句，网上引入高德有很多方法，有npm下vue-amap包的还有别的，我觉得挺费劲的还得去main.js里面配置，我用的直接在 index.html 里面引入script脚本的方式(方便复制粘贴)。 <script src="//webapi.amap.com/maps?v=1.4.15&key=这里面填你申请的key&plugin=AMap.CustomLayer"></script> 使用方法：复制上面这段 script 标签，双击 这里面填你申请的key 选中删除，换成你自己申请的key。然后将标签粘贴到你vue项目中public文件夹下有个 index.html 中第九行（如果你没有引入其他东西的话） 3. 下载echarts 下载完别忘记在 main.js 中引入 import echarts from 'echarts' ，同时全局注册一下 Vue.prototype.$echarts =

【推荐阅读】微服务还能火多久？>>> this.$refs.map.$amap.setFitView(markers) 获取实例，$amap 为 el-map 的 vid，没错，vid 获取方式就是这样 markers 为 Amap.Marker 构造函数的实例数组。 来源： oschina 链接： https://my.oschina.net/u/4287715/blog/3234780

:mapStyle="mapStyle"data写 mapStyle: 'amap://styles/blue' 来源： https://www.cnblogs.com/luckyShuang/p/11856118.html

vue-amap是一套基于Vue 2.0和高德地图的地图组件。 安装 npm install -S vue-amap 使用文档 https://elemefe.github.io/vue-amap 使用方法 <template> <div class="test"> <div class="amap-wrapper map"> <!--vid:marker对象id,zoomEnable:鼠标滚轮是否允许放大缩小--> <!--dragEnable:书否允许拖拽，zoom:地图范围--> <!--center:地图中心--> <el-amap class="amap-box" :vid="'amap-vue'" :zoomEnable="maps.enable" :dragEnable="maps.enable" :zoom="maps.zoom" :center="maps.center"> <!--position:标记中心，label:标记文本--> <!--clickable:是否允许点击，events触发事件--> <div v-for="mark in maps.markpoint"> <el-amap-marker :position="mark.point" :label="mark.name" :clickable="maps.enableclick"

　　今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度。 　　这是vue-amap的官网文档： https://elemefe.github.io/vue-amap/#/ 　　这是我的码云项目的地址 ： http://git.oschina.net/ye_a_rs/project-vue-ele/tree/master/src 用 vue init webpack 项目名称 创建一个项目 npm安装vue-amap组件 ： npm install vue-amap --save 在main.js引入vue-amap ： import Vue from 'vue'; import AMap from 'vue-amap'; import App from './App.vue'; Vue.use(AMap); AMap.initAMapApiLoader({ key: 'your amap key', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'，'AMap.Geolocation'] }); new

地图几乎是很多项目中不可或缺的一部分，这里介绍下在vue+element中vue-map的使用。 1、安装 npm install vue-amap --save 2、配置 全局配置，在 main.js 中配置，代码如下： import VueAMap from 'vue-amap'; Vue.use(VueAMap); //初始化 VueAMap.initAMapApiLoader({ key: 'your key', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],//依赖配置，根据自己的需求引入 // 默认高德 sdk 版本为 1.4.4 v: '1.4.4' }); 3、使用 3-1、只显示地图及中心点定位 <template> <div class="content"> <div class="amap-wrapper"> <el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle"></el-amap> </div> <

1. 使用 <el-amap class="amap-box" :vid="'amap-vue'"></el-amap> 2. 在 定制化程度较高 的项目中，开发者可能只想通过 vue-amap 引入高德地图，而部分实例化的操作直接基于高德地图的 sdk 完成。这个时候就需要 lazyAMapApiLoaderInstance 。 lazyAMapApiLoaderInstance.load().then(() => { // your code ... this.map = new AMap.Map('amapContainer', { center: new AMap.LngLat(121.59996, 31.197646) }); }); 3. 静态属性，不支持响应 vid String 地图容器节点的ID。 amapManager AMapManager 地图管理对象。 defaultCursor String 地图默认鼠标样式。参数defaultCursor应符合CSS的cursor属性规范。 animateEnable Boolean 地图平移过程中是否使用动画，默认为true，即使用动画。 isHotspot Boolean 是否开启地图热点，默认false 不打开。 rotateEnable Boolean 地图是否可旋转，默认false。 resizeEnable

Step 1 引用 app.ts // 引入 import VueAMap from 'vue-amap'; // 全局应用配置初始化 Vue.use(VueAMap); VueAMap.initAMapApiLoader({ // 申请到的AMap Key key: 'xxxxxx', // 用到的组件 plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'], // 版本 v: '1.4.4' }); vue-amap.d.ts declare module 'vue-amap'; // 重要 declare const AMap: any; Step 2 页面 page.vue <template> <!-- 注意，在引入原生SDK时，amap-manager属性非常重要 --> <el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom"> </el-amap> </template> <script lang="ts"> import { AMapManager } from 'vue-amap'; export default class AmapDemo