vue-amap小结

vue-amap:高德地图API   

我主要作的是点坐标＋信息窗体展现。

新建一个vue项目，下载vue-amap/axios。在项目中引入，并将axios设置全局

vue-amap须要本身的专属key值，key申请地址：https://lbs.amap.com/dev/id/newuser

在index.js---module.exports---dev中添加接口的配置

proxyTable: { '/third' : {
 target: '***************', // 测试服务器地址
 changeOrigin: true,//容许跨域
 pathRewrite: {
 '^/third': '/third'
　　　　}
　　　}
　}

以后是app.vue

一步一步实现:先实现点坐标      https://elemefe.github.io/vue-amap/#/zh-cn/coverings/marker（点坐标文档）

在data中声名markets，数组形式，用来存放请求到的点坐标的坐标，以及每一个点坐标的响应事件。

数据形式：

markers: [ { position: [121.5273285, 31.21515044], events: { click: () => { alert('click marker'); }, dragend: (e) => { console.log('---event---: dragend') this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]; } } } ],

position:点坐标的坐标值，events---click对点坐标点击的响应事件，其中e参数带的有用信息为每一个点坐标的下标e.target.Uh.vid，和每一个点坐标的经纬度e.lnglat.lng和e.lnglat.lat

处理好点坐标  而后让信息窗体显示粗来。

声名windows和currentWindow  来控制每一个点坐标对应的窗体。

 

在点坐标的点击事件中获取经纬度，设置visiable（控制信息窗体显示隐藏，官网可查），在e中获取到下标  将点击的windows窗体的信息赋给currentWindow，将currentWindow的visiable的属性设为true。

最后打包须要把index.js的build设置assetsPublicPath: './',

打包撂给后台

PS:设置地图的背景：在<el-amap>中添加:mapStyle='mapStyle'，在data里面声名mapStyle：‘’，在mounted对this.mapStyle='你的地图样式'，ok、

　　设置markets的样式：在markets的数据中加一个属性icon，也是string属性，直接写图片地址。

写博客很少~语言组织混乱。见谅