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属性，直接写图片地址。

写博客不多~语言组织混乱。见谅

猜你喜欢