vue高德地图

2018-05-21

在做基于LBS的应用中，时常会和地图打交道，最直接的解决方案，当然是去对应的地图官网找文档，然后一步步来玩。对于简单场景而言，体验应该还好，但对于一些状态多，变化频繁的复杂场景而言，不仅要时刻维护本地数据状态和地图状态同步，还要查找设置各种状态的地图API，实在是让人头疼的事情，这里我把我自己做过的经验分享一下，一来是自己做下笔记，二来是希望能给一些网友帮助。查看效果

- 项目目录结构

使用vue-cli创建的工程
目录结构

- 引入高德地图资源

在index.html页面加入资源：

<script src="http://webapi.amap.com/maps?v=1.4.5&key=你的key"></script>

还没有创建过高德地图开发者账号的，这里有传送门

- 获取围栏列表

查看高德地图地理围栏API文档，传送门
通过查阅文档可知，查询围栏接口为：http://restapi.amap.com/v4/geofence/meta?key=用户key；这里建议开发者定义一个全局变量key,在后续的创建围栏、删除围栏都需要，这样方便以后更改。

获取数据结构为：

{
	"data": {
		"page_no": 1,
		"page_size": 20,
		"rs_list": [{
			"adcode": "0",
			"alert_condition": "leave",
			"center": "112.996064,28.188747",
			"create_time": "2018-03-30 19:39:40",
			"enable": true,
			"fixed_date": "",
			"gid": "9936a5cb-d629-4ea1-b736-4bb07704fa19",
			"id": "0",
			"key": "5a56c9f0200552fc3d02f25e387f9bdc",
			"name": "圆形围栏测试",
			"points": "",
			"radius": 500,
			"repeat": "Mon,Tues,Wed,Thur,Fri,Sat,Sun",
			"time": "00:00,11:59;13:00,23:59",
			"valid_time": "2018-06-28"
		}],
		"total_record": 3
	},
	"errcode": 0,
	"errdetail": null,
	"errmsg": "OK"
}

拿到数据后可以直接显示在页面当中：如图所示
围栏列表

- 创建围栏

1、创建地图对象
再edit.vue中首先选定地图的div容器，再创建地图对象。

<div id="container" tabindex="0"></div>
在钩子函数mounted中创建地图对象。为什么要在mounted而不是在created呢？
created是在实列创建之后执行的函数，而mounted是在HTML加载完成之后执行的函数。地图这里适合这里创建地图对象。

2、设置marker点标注

设置围栏需要设置知道经度纬度，这就需要点击地图上任意位置，点击了还需要知道点击了哪些位置，所以需要设置marker点标注。

给地图绑定点击事件，绑定点击事件后，点击的时候回返回经度纬度，这那个便可以这只marker点。
在高德地图API文档中有绑定事件说明。原始写法中是这样的：
此处输入图片的描述
在这里我是做了这样的处理：

 //高德地图绑定点击事件
this.map.on("click", res => {
//获取到经度纬度
  let data = { Lng: res.lnglat.getLng(), lat: res.lnglat.getLat() };
});

设置marker点：

高德地图API文档中设置marker 点写法为：

marker = new AMap.Marker({
    position: provinces[i].center.split(','),
    title: provinces[i].name
});
marker.setMap(mapObj);

我在设置围栏点时候，设置两种类型，一种是圆形围栏，另外一种是多边形围栏。在设置圆形围栏点时候，你需要有一个更新marker点，以为圆形围栏是只有一个点，只需要设置半径大小。每次点击地图上点任意点都是更新marker点，也就是重新这只圆形围栏。

 //第一次点击设置标记
 var positionMark;
      postionMark = new AMap.Marker({
        map: _this.map,//地图对象
        icon: _this.markers[0].icon,//markers数组，储存marker点标注数据
        position: [
          _this.markers[0].position[0],
          _this.markers[0].position[1]
        ],
        offset: new AMap.Pixel(-12, -36)
      });
      postionMark.setMap(_this.map);
//更新点标注
 //第二次更新标记，高德地图api方法
      postionMark.setPosition([
        _this.markers[0].position[0],
        _this.markers[0].position[1]
      ]); //更新点标记位置

具体代码：

<template>
  <div class="editmap-body">
    <mt-header title="电子围栏">
     <mt-button icon="back" @click="goback" slot="left"></mt-button>
     <span slot="right" @click="sheetVisible=true">围栏类型</span>
    </mt-header>
     <!-- 地图容器container -->
    <div id="container" tabindex="0"></div>
    <div class="drag-body" v-show="drawType==0">
      <div class="drag">
          <mt-range v-model="radius"  :min="100" :step="100" :max="1500">
            <div slot="start" style="margin-right: 5px;">100</div>
            <div slot="end" style="margin-left: 5px;">150</div>
          </mt-range>
          <p v-show="!isdraw">当前圆形半径为：{{radius}}</p>
      </div>
    </div>
      <div class="footer-tip">
        <p v-if="drawType==1">请在地图上点击三个以上的点组成一个闭合的多边形作为安全范围的区域</p>
        <p v-else>请在地图上点击任意位置</p>
        <button class="btn-ok" @click="goedit">确定</button>
      </div>
       <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
       <transition name="slide">
          <router-view class="router-body"></router-view>
       </transition>
  </div>
</template>
<script>
var postionMark;
var positionMarkPry;
let circle, polygon, geolocation;
export default {
  data() {
    return {
      mapInfo: {},
      sheetVisible: false,
      actions: [
        { name: "圆形（默认）", method: this.drawClk, type: 0 },
        { name: "自定义形状", method: this.drawClk, type: 1 }
      ],
      drawType: 0,
      markers: [],
      markerArray: [],
      isClik: true,
      isdraw: true,
      radius: 500,
      isfirstLoding: false
    };
  },
  created() {
    if (this.$route.query.gid) {
      this.getdata();
    }
  },
  mounted() {
    let _this = this;
    //创建地图对象，并把对象复制给map。
    this.map = new AMap.Map("container", {
      //创建地图
      resizeEnable: true,
      zoom: 14
    });
    if (!this.$route.query.gid) {
      //如果是新建那么就获取用户所在位置
      this.map.plugin("AMap.Geolocation", function() {
        geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：无穷大
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          buttonPosition: "RB"
        });
        _this.map.addControl(geolocation);
        geolocation.getCurrentPosition();
      });
    }
    postionMark = this.map;
    //高德地图绑定点击事件
    this.map.on("click", res => {
      let data = { Lng: res.lnglat.getLng(), lat: res.lnglat.getLat() };
      this.mapClk(data);
    });
  },
  methods: {
    getdata() {
      this.isfirstLoding = true;
      this.$http
        .get("http://restapi.amap.com/v4/geofence/meta", {
          params: {
            key: this.mapKey,
            gid: this.$route.query.gid,
            page_no: 1,
            page_size: 20
          }
        })
        .then(res => {
          this.mapInfo = res.data.data.rs_list[0];
          let data = this.mapInfo.center.split(",");
          this.map.setCenter([data[0], data[1]]); //设置地图中心点
          if (this.mapInfo.points=='') {
            let data = this.mapInfo.center.split(",");
            this.mapClk({ Lng: data[0], lat: data[1] });
            this.radius = this.mapInfo.radius; //圆形半径
          } else {//多边形
            let data = this.mapInfo.points.split(";");
            this.drawType = 1;
            data.forEach((ary, index) => {
              this.markers.push({
                icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [ary.split(",")[0], ary.split(",")[1]]
              });
              if (index == data.length - 1) {
                this.setting();
                this.drawSt();
                this.isfirstLoding = false;
              }
            });
          }
        })
        .catch(err => {
          this.toast("查询失败");
        });
    },
    mapClk(res) {
      if (this.drawType == 0) {
        this.markers = [
          {
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [res.Lng, res.lat]
          }
        ];
        //如果是圆形类型
        this.setting();
        this.drawSt();
      } else {
        //自定义形状
        this.markers.push({
          icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
          position: [res.Lng, res.lat]
        });
        this.setting();
        if (this.markers.length > 3 || this.markers.length == 3) {
          this.drawSt();
        }
      }
    },
    setting() {
      //设置标记点
      let _this = this;
      if (this.drawType == 0) {
        if (this.isClik) {
          //第一次点击设置标记
          postionMark = new AMap.Marker({
            map: _this.map,
            icon: _this.markers[0].icon,
            position: [
              _this.markers[0].position[0],
              _this.markers[0].position[1]
            ],
            offset: new AMap.Pixel(-12, -36)
          });
          postionMark.setMap(_this.map);
          this.isClik = false;
        } else {
          //第二次更新标记
          postionMark.setPosition([
            _this.markers[0].position[0],
            _this.markers[0].position[1]
          ]); //更新点标记位置
        }
      } else {
        //多边形标记
        this.markers.forEach(function(marker) {
          positionMarkPry = new AMap.Marker({
            map: _this.map,
            icon: marker.icon,
            position: [marker.position[0], marker.position[1]],
            offset: new AMap.Pixel(-12, -36)
          });
          _this.markerArray.push(positionMarkPry);
          positionMarkPry.setMap(_this.map);
        });
      }
    },
    drawSt() {
      //画围栏事件
      let _this = this;
      //画出围栏
      if (this.drawType == 0) {
        //圆形类型
        if (this.isdraw) {
          //第一个设置圆形
          circle = new AMap.Circle({
            center: new AMap.LngLat(
              _this.markers[0].position[0],
              _this.markers[0].position[1]
            ), // 圆心位置
            radius: _this.radius, //半径
            strokeColor: "#F33", //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 3, //线粗细度
            fillColor: "#ee2200", //填充颜色
            fillOpacity: 0.35 //填充透明度
          });
          circle.setMap(this.map);
          this.isdraw = false;
        } else {
          //更新圆形中心位置
          circle.setCenter([
            this.markers[0].position[0],
            this.markers[0].position[1]
          ]);
        }
      } else {
        //自定义类型
        let polygonArr = new Array(); //多边形覆盖物节点坐标数组
        this.markers.forEach(function(marker) {
          polygonArr.push([marker.position[0], marker.position[1]]);
        });
        polygon = new AMap.Polygon({
          path: polygonArr, //设置多边形边界路径
          strokeColor: "#FF33FF", //线颜色
          strokeOpacity: 0.2, //线透明度
          strokeWeight: 3, //线宽
          fillColor: "#1791fc", //填充色
          fillOpacity: 0.35 //填充透明度
        });
        polygon.setMap(this.map);
      }
    },
    drawClk(val) {
      //选择围栏类型
      this.drawType = val.type;
    },
    goback() {
      //返回上一页
      this.$router.go(-1);
    },
    goedit() {
      let datajson;
      if (this.markers.length == 0) {
        this.toast("请先设置围栏");
        return false;
      }
      if (this.drawType == 0) {
        datajson = {
          type: this.drawType,
          data: this.markers,
          radius: this.radius
        };
      } else {
        datajson = { type: this.drawType, data: this.markers, radius: "" };
      }
      this.$store.commit("setMap", datajson); //把数据存入仓库当中
      this.$router.push({
        path: "/editMap/mapInfo_edit",
        query: { gid: this.$route.query.gid, name: this.mapInfo.name,id:this.$route.query.id}
      });
    }
  },
  watch: {
    radius(val) {
      //监听改变拖动value的值
      circle.setRadius(val);
    },
    drawType(val) {
      /***
       * 当this.drawType为0时切换为了圆形围栏，那么需要置空多边形。设置isClick为true,isdraw为true
       *
       */
      console.log(this.isfirstLoding)
      if (!this.isfirstLoding) {
        console.log('变化')
        //判断是否为编辑围栏，如果为编辑围栏那么初次进入页面注销watch事件
        if (this.markers.length > 0) {
          if (val == 0) {
            this.map.remove(this.markerArray);
            polygon.setMap(null);
            this.isClik = true;
            this.isdraw = true;
          } else {
            postionMark.setMap(null);
            circle.setMap(null);
          }
          this.markers = [];
        }
      }
    }
  }
};
</script>

以上代码就是具体点设置地理围栏点方法，最重要点是查看API文档，高德地图里每个参数都是有写，仔细查看都能找到具体的方法。文档就写到这里，如果有什么问题可以随时在github上留言。把自己折腾的东西写出来是为了以后工作中快速找到问题点，再一个就是给自己给同样遇到问题的网友提供帮助。欢迎吐槽。。。