利用高德地图绘制点

106 阅读1分钟

项目需求:在地图上点击一个点给后端发送经纬度,用户可以通过app导航抵达该点。

image.png

 /**
     * @description: 绘制点
     */
    drawPoint() {
      if (this.navigationTool != null) {
        this.navigationTool.close(true);
      }
      this.navigationTool = new AMap.MouseTool(this.map);//在data中定义一个存储鼠标工具
      this.navigationTool.marker({});//开启鼠标画点标注模式。在地图上单击绘制点标注,标注样式参考MarkerOptions设置
      this.navigationTool.on("draw", (event) => { //绑定draw()事件鼠标工具绘制覆盖物结束时触发此事件,obj对象为绘制出来的覆盖物对象
        let postion = event.obj.getPosition();
        this.navigationPoint.push({
          time: +new Date(),
          id: this.genID(5),
          name: "导航标记",
          longitude: postion.lng + "",
          latitude: postion.lat + "",
        });
      });
    },

点击发送之后推出鼠标工具

/**

     * @description: 结束绘制点

     */

    endDrawPoint() {

      this.navigationPoint = [];

      if (this.navigationTool != null) {

        this.navigationTool.close(true);//关闭鼠标工具

        this.navigationTool = null;

      }

    },