vue-amap

昨天把vue的地图（高德）搞了下： 步骤： 1.去高德开发者平台申请key； 2.安装vue-amap； 3.使用组件调用地图 1.npm安装vue-amap npm install vue-amap --save 2.在项目main.js引入vue-amap import AMap from 'vue-amap'; Vue.use(AMap); // 初始化vue-amap AMap.initAMapApiLoader({ // 高德key key: '你的key', // 插件集合 （插件按需引入） plugin: ['AMap.Geolocation'] }); 3.重点来了 （1）在map.vue(我自己定义的 .vue) template 中加入 <template> <div class="amap-page-container"> <div :style="{width:'100%',height:'300px'}"> <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"> </el-amap> </div> <div class="toolbar"> <span v-if="loaded"> location: lng = {{ lng }} lat = {{ lat }} <

一、 down一个vue webpack的模板 vue init webpack vueamap 根据提示完成模板下载，此处我的项目中选择router为yes 其他测试插件全为no vueamap为文件夹名称 模板下载后 安装依赖 cnpm install 依赖安装完成后 执行开发环境 npm run dev 若提示在"localhost:8080"上查看效果，在浏览器上查看效果，若出现VUE效果 则模板下载成功 二、 安装vue-amap 安装vue-amap cnpm install vue-amap --save 安装完成后，main.js文件中引入 import VueAMap from "vue-amap" ; Vue.use(VueAMap); 初始化高德地图，此处需要有一个KEY，可以到高德地图平台上去申请. 初始化高德地图的key与插件 VueAMap.initAMapApiLoader({ key: "e1dedc6bdd765d46693986ff7ff969f4" , plugin: [ "AMap.Autocomplete" , //输入提示插件 "AMap.PlaceSearch" , //POI搜索插件 "AMap.Scale" , //右下角缩略图插件 比例尺 "AMap.OverView" , //地图鹰眼插件 "AMap.ToolBar" , /

由于业务需要，vue-amap提供的组件不够实现部分业务，需要使用高德原生SDK来定制化。对于vue-amap，都有init事件，参数为高德的实例，因此可以自由的将原生SDK和vue-amap结合使用 对于el-map组件，支持一个amap-manage属性，通过这个属性可以再任何地方获取高德原生Amap.Map实例 记录两个简单案例，以便后续查阅 使用官方UI，通过原生的方法增加circle 以及信息窗体。 最终效果图下3张图 页面初始的时候 地图生成后，使用官方UI生成marker，点击增加circle按钮 会以marker为中心绘制一定半径的圆形区域，点击更改range按钮，增加圆形区域半径，点击信息窗体按钮 绘制信息窗口 组件部分： < template > < div class = "amap-page-container" > < el-amap vid = "amapDemo" :center ="center" :amap-manager ="amapManager" :zoom ="zoom" :events ="events" class = "amap-demo" > </ el-amap > < div class = "toolbar" > < button @click ="addCircle()" > 增加 circle </ button > <

实现了地图选址功能后，现在来实现一个根据地址回显地图并标记的功能，效果图如下： 直接上代码： main.js中引入 import Vue from 'vue' import VueAMap from 'vue-amap' import App from './App' import router from './router' Vue.config.productionTip = false localStorage.clear(); Vue.use(VueAMap) VueAMap.initAMapApiLoader({ //高德的key key: "cc644a48b701c256e9a827f068743fdd", // 插件集合 plugin: [ "AMap.Autocomplete",// 输入提示插件 "AMap.PlaceSearch",// POI搜索插件 "AMap.Scale",// 右下角缩略图插件 比例尺 "AMap.OverView",// 地图鹰眼插件 "AMap.ToolBar",// 地图工具条 "AMap.MapType",// 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制 "AMap.PolyEditor",// 编辑 折线多，边形 "AMap.CircleEditor",// 圆形编辑器插件 "AMap

优点：可以直接集成到vue中，而且不需要配置跨域相关信息 使用vue-amap进行省市定位需要用到api插件中的定位插件，链接地址： vue-amap定位插件 在vue项目中使用 使用步骤： 1.安装 npm install vue-amap --save 或者 yarn add vue-amap 2.在.babelrc文件中配置如下信息 { "presets": [ ["es2015", { "modules": false }] ] } 3.下载 babel-preset-es2015 npm install babel-preset-es2015 --save 或者 yarn add babel-es2015 4.在main.js中引入vue-amap并引用 import VueAMap from 'vue-amap'; Vue.use(VueAMap); // 初始化 省市定位关键是在plugin中加入AMap.Geolocation VueAMap.initAMapApiLoader({ key: '你在高德地图注册拿到的key', plugin: [ 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap

步骤： 1.去高德开发者平台申请key； 2.安装vue-amap； 3.使用组件调用地图 一.npm安装vue-amap npm install vue-amap --save 二.在项目main.js引入vue-amap import AMap from 'vue-amap'; Vue.use(AMap); // 初始化vue-amap AMap.initAMapApiLoader({ // 高德key key: '你的key', // 插件集合 （插件按需引入） plugin: ['AMap.Geolocation'] }); 三.在map.vue(我自己定义的 .vue) template 中加入，加入script export default <template> <div class="amap-page-container"> <div :style="{width:'100%',height:'300px'}"> <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"> </el-amap> </div> <div class="toolbar"> <span v-if="loaded"> location: lng = {{ lng }} lat = {{ lat }} <

vue调用高德地图拢共分三步 1.去高德开发者平台申请key； 2.安装vue-amap； 3.使用组件调用地图 2.vue安装vue-amap npm安装 npm install vue-amap --save 　 CDN 目前可通过 unpkg.com/vue-amap 获取最新版本的资源。 <script src="https://unpkg.com/vue-amap/dist/index.js"></script> main.js引入vue-amap // 引入vue-amap import AMap from 'vue-amap'; Vue.use(AMap); // 初始化vue-amap AMap.initAMapApiLoader({ // 高德的key key: 'YOUR_KEY', // 插件集合 （插件按需引入） plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'] }); 3.组件里调用高德地图 需要注意：<el-amap>一定要设置宽高，不然地图不会显示。或者给外面套一个div，给div设置宽高也行。

安装vue-amap npm install --save vue-amap 在main.js中引入如下 // 引入地图 import aMap from 'vue-amap' Vue.use(aMap) aMap.initAMapApiLoader({ key: '高德地图中的key', plugin: ['AMap.Geolocation'] }) index.vue中 <!-- 地图 --> <div class="amap-page-container"> <br/> <span style="color: red"> 选择位置（要是地图没有出来，刷新一下页面） </span> <el-amap vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo" :events="events"> </el-amap> <div class="toolbar"> <br/> <span style="color: red"> 纬度：{{ lng }}, 经度：{{ lat }} </span> </div> </div> index.vue的data中 let self = this; return { zoom: 12, center: [121.59996, 31.197646], events: { click