vue3中使用百度地图

萧寂173

已于 2023-10-20 10:17:41 修改

阅读量3.2k

点赞数

分类专栏：地图文章标签：前端前端框架

于 2023-10-18 14:07:46 首次发布

本文链接：https://blog.csdn.net/weixin_68658847/article/details/133904778

版权

地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基本使用

在项目的index.html加入以下代码(记得替换成自己的key)

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=自己的key"></script>

在组件中加入以下代码

<template>
  <div id="container"></div>
</template>
 
<script setup>
import { nextTick, onMounted } from 'vue'
onMounted(() => {
  nextTick(() => {
    initMap()
  })
})
 
const initMap = () => {
  var map = new BMapGL.Map('container');
  var point = new BMapGL.Point(116.404, 39.925);
  map.centerAndZoom(point, 15);
  // 创建点标记
  var marker = new BMapGL.Marker(point);
  map.addOverlay(marker);
  // 创建信息窗口
  var opts = {
    width: 200,
    height: 100,
    title: '故宫博物院'
  };
  var infoWindow = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts);
  // 点标记添加点击事件
  marker.addEventListener('click', function () {
    map.openInfoWindow(infoWindow, point); // 开启信息窗口
  });
}
 
</script>
 
<style>
#container {
  overflow: hidden;
  width: 500px;
  height: 500px;
  margin: 0;
  font-family: "微软雅黑";
}
</style>

运行效果图

在这里插入图片描述

实用百度地图进行绘制(BMap版本,下面还有一个BMapGL版本)

原生html版

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body,
    html {
      width: 100%;
      height: 100%;
      margin: 0;
      font-family: "微软雅黑";
    }

    #allmap {
      width: 100%;
      height: 500px;
      overflow: hidden;
    }

    #result {
      width: 100%;
      font-size: 12px;
    }

    dl,
    dt,
    dd,
    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    p {
      font-size: 12px;
    }

    dt {
      font-size: 14px;
      font-family: "微软雅黑";
      font-weight: bold;
      border-bottom: 1px dotted #000;
      padding: 5px 0 5px 5px;
      margin: 5px 0;
    }

    dd {
      padding: 5px 0 0 5px;
    }

    li {
      line-height: 28px;
    }
  </style>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=自己在百度地图申请的key"></script>
  <!--加载鼠标绘制工具-->
  <script type="text/javascript"
    src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
  <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
  <!--加载检索信息窗口-->
  <script type="text/javascript"
    src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
  <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
  <title>鼠标绘制工具</title>
  <style>
    body,
    html {
      width: 100;
      height: 100%;
      margin: 0;
      font-family: "微软雅黑";
    }

    #allmap {
      width: 100%;
      height: 500px;
      overflow: hidden;
    }

    #result {
      width: 100%;
      font-size: 12px;
    }

    dl,
    dt,
    dd,
    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    p {
      font-size: 12px;
    }

    dt {
      font-size: 14px;
      font-family: "微软雅黑";
      font-weight: bold;
      border-bottom: 1px dotted #000;
      padding: 5px 0 5px 5px;
      margin: 5px 0;
    }

    dd {
      padding: 5px 0 0 5px;
    }

    li {
      line-height: 28px;
    }
  </style>
</head>

<body>
  <div id="allmap" style="overflow: hidden; zoom: 1; position: relative">
    <div id="map" style="
        height: 100%;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
      "></div>
  </div>
  <div id="result">
    <button>清除所有覆盖物</button>
  </div>
  <script type="text/javascript">
    let btn = document.querySelector("button")
    // 清除覆盖物
    btn.addEventListener('click', function () {
      clearAll()
    })
    function isPointInPolygon (point, polygon) {
      let x = point.lng
      let y = point.lat
      let inside = false
      for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
        let xi = polygon[i].lng
        let yi = polygon[i].lat
        let xj = polygon[j].lng
        let yj = polygon[j].lat

        let intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi
        if (intersect) inside = !inside
      }
      return inside
    }
    let overlays = []

    // 百度地图API功能
    map = new BMap.Map('map')
    var poi = new BMap.Point(116.307852, 40.057031)  // 初识加载的地点
    map.centerAndZoom(poi, 16) // 放大级别
    map.enableScrollWheelZoom()
    var overlaycomplete = function (e) {
      // 这里由于老板的要求,覆盖物只能存在一次,因此不能让多次去画,需要进行一下判断,有多个存在时直接清空一下
      if (overlays.length > 0) {
        alert('覆盖物只能标注一个')
        clearAll()
      }
      // 不存在多个时,将当前覆盖的信息存储到地图上
      overlays.push(e.overlay)
      console.log('e.overlay.Ko', e.overlay.Ko)  // 我这里的需求是需要画矩形框,这个参数返回了一个数组,里面包含矩形的四个坐标点

      // 这里进行判断,判断当前传入的坐标点是否在矩形内,返回布尔值
      console.log('isPointInPolygon({lng:116.311661,lat:40060179},e.overlay.Ko)', isPointInPolygon({ lng: 116.311661, lat: 40.060179 }, e.overlay.Ko))
    }

    // let isDrawing = false
    // 监听鼠标按住事件
    map.addEventListener('mousedown', () => {
      // 在鼠标按住时开启绘制工具
      drawingManager.open()
    })

    // 监听鼠标松开事件
    map.addEventListener('mouseup', () => {
      // 在鼠标松开时关闭绘制工具
      drawingManager.close()
    })

    var styleOptions = {
      strokeColor: "red",    //边线颜色。
      fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
      strokeWeight: 3,       //边线的宽度，以像素为单位。
      strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
      fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
      strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(map, {
      isOpen: false, //是否开启绘制模式
      enableDrawingTool: true, //是否显示工具栏
      drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
        offset: new BMap.Size(5, 5), //偏离值
        drawingModes: [BMAP_DRAWING_RECTANGLE], //控制工具栏显示的选项(不写这个选项代表全部显示)
      },
      circleOptions: styleOptions, //圆的样式
      polylineOptions: styleOptions, //线的样式
      polygonOptions: styleOptions, //多边形的样式
      rectangleOptions: styleOptions,//矩形的样式
      // enableContinuousDrawing: false,
    })

    //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete)

    // 清空所有覆盖物
    function clearAll () {
      console.log('1234',1234);
      // 循环遍历清除
      for (var i = 0; i < overlays.length; i++) {
        map.removeOverlay(overlays[i])
      }
      overlays.length = 0
    }
  </script>
</body>

</html>

Vue3+vite版本

在index.html引入相关工具包

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue</title>
  <script type="text/javascript"
    src="https://api.map.baidu.com/api?v=2.0&ak=个人申请的key"></script>
  <!--加载鼠标绘制工具-->
  <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
  <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
  <!--加载检索信息窗口-->
  <script type="text/javascript"
    src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
  <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

在组件内使用

<script setup>

import { ref, reactive, onMounted, nextTick } from 'vue'
const count = ref(0)
var map = null
onMounted(() => {
  nextTick(() => {
    init()
  })
})

/**
 * 
 * @param {点坐标} point 
 * @param {矩形四个角坐标} polygon 
 * @returns {inside} 判断某个点是否在矩形框内,返回值为布尔值
 */
function isPointInPolygon (point, polygon) {
  let x = point.lng
  let y = point.lat
  let inside = false
  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
    let xi = polygon[i].lng
    let yi = polygon[i].lat
    let xj = polygon[j].lng
    let yj = polygon[j].lat

    let intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi
    if (intersect) inside = !inside
  }
  return inside
}

// 存储每个覆盖物的信息
let overlays = ref([])
function init () {
  // 百度地图API功能
  map = new BMap.Map('map')
  var poi = new BMap.Point(116.307852, 40.057031)  // 初识加载的地点
  map.centerAndZoom(poi, 16) // 放大级别
  map.enableScrollWheelZoom()
  var overlaycomplete = function (e) {
    // 这里由于老板的要求,覆盖物只能存在一次,因此不能让多次去画,需要进行一下判断,有多个存在时直接清空一下
    if (overlays.value.length > 0) {
      alert('覆盖物只能标注一个')
      clearAll()
    }
    // 不存在多个时,将当前覆盖的信息存储到地图上
    overlays.value.push(e.overlay)
    console.log('e.overlay.Ko', e.overlay.Ko)  // 我这里的需求是需要画矩形框,这个参数返回了一个数组,里面包含矩形的四个坐标点

    // 这里进行判断,判断当前传入的坐标点是否在矩形内,返回布尔值
    console.log('isPointInPolygon({lng:116.311661,lat:40060179},e.overlay.Ko)', isPointInPolygon({ lng: 116.311661, lat: 40.060179 }, e.overlay.Ko))
  }

  // let isDrawing = false
  // 监听鼠标按住事件
  map.addEventListener('mousedown', () => {
    // 在鼠标按住时开启绘制工具
    drawingManager.open()
  })

  // 监听鼠标松开事件
  map.addEventListener('mouseup', () => {
    // 在鼠标松开时关闭绘制工具
    drawingManager.close()
  })

  var styleOptions = {
    strokeColor: "red",    //边线颜色。
    fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
    strokeWeight: 3,       //边线的宽度，以像素为单位。
    strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
    fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
    strokeStyle: 'solid' //边线的样式，solid或dashed。
  }
  //实例化鼠标绘制工具
  var drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: false, //是否开启绘制模式
    enableDrawingTool: true, //是否显示工具栏
    drawingToolOptions: {
      anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
      offset: new BMap.Size(5, 5), //偏离值
      drawingModes: [BMAP_DRAWING_RECTANGLE], //控制工具栏显示的选项(不写这个选项代表全部显示)
    },
    circleOptions: styleOptions, //圆的样式
    polylineOptions: styleOptions, //线的样式
    polygonOptions: styleOptions, //多边形的样式
    rectangleOptions: styleOptions,//矩形的样式
    // enableContinuousDrawing: false,
  })

  //添加鼠标绘制工具监听事件，用于获取绘制结果
  drawingManager.addEventListener('overlaycomplete', overlaycomplete)
}

// 清空所有覆盖物
function clearAll () {
  // 循环遍历清除
  for (var i = 0; i < overlays.value.length; i++) {
    map.removeOverlay(overlays.value[i])
  }
  overlays.value.length = 0
}

</script>

<template>
  <div id="allmap" style="overflow: hidden; zoom: 1; position: relative">
    <div
      id="map"
      style="
        height: 100%;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
      "
    ></div>
  </div>
  <div id="result">
    <button @click="clearAll">清除所有覆盖物</button>
  </div>
</template>

<style scoped>
body,
html {
  width: 100;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}
#allmap {
  width: 100%;
  height: 500px;
  overflow: hidden;
}
#result {
  width: 100%;
  font-size: 12px;
}
dl,
dt,
dd,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
p {
  font-size: 12px;
}
dt {
  font-size: 14px;
  font-family: "微软雅黑";
  font-weight: bold;
  border-bottom: 1px dotted #000;
  padding: 5px 0 5px 5px;
  margin: 5px 0;
}
dd {
  padding: 5px 0 0 5px;
}
li {
  line-height: 28px;
}
</style>

效果图(可以添加多个控件,我这里目前只需要长方形,上面代码也对坐标点是否被包含在随机画的长方形内也做了判断) , 原生html或vue版本运行效果皆如图所示
在这里插入图片描述

根据鼠标轨迹画轨迹线(实时轨迹)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=个人申请的秘钥"></script>
  <!--加载鼠标绘制工具-->
  <script type="text/javascript"
    src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
  <link rel="stylesheet" href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
  <!--加载检索信息窗口-->
  <script type="text/javascript"
    src="https://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
  <link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
</head>

<body>
  <div id="allmap" style="width: 100%;height: 1000px;"></div>
  <div id="r-result">
    <input type="button" onclick="add_overlay();" value="添加覆盖物" />
    <input type="button" onclick="remove_overlay();" value="删除覆盖物" />
  </div>
  <script>
    // 百度地图API功能
    var map = new BMap.Map("allmap")
    var point = new BMap.Point(116.404, 39.915)
    map.centerAndZoom(point, 15)

    var last_point
    function draw_trail (lon, lat) {
      var t = new BMap.Point(lon, lat)

      if (last_point) {
        var polyline = new BMap.Polyline([
          last_point,
          t
        ], { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 })

        map.addOverlay(polyline)
      }
      last_point = t
    }

    map.addEventListener('mousemove', function (e) {
      if (e.point) {
        if (e.point.lng && e.point.lat) {
          draw_trail(e.point.lng, e.point.lat)
        }
      }

    })

  </script>
</body>
</html>

效果图如下
在这里插入图片描述

实用百度地图进行绘制(BMapGL版本)

原生html(这个只有基础的绘制工具和其功能显示,没有别的多余功能,功能多的可以看下面的vue版本的)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>百度地图绘制矩形示例</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=个人申请的key"></script>
  <!-- 下面两个都是在线链接,不是根路径 -->
  <link href="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
  <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>

  <script type="text/javascript">
    var map = new BMapGL.Map("map")

    // 设置地图中心点和缩放级别(不加上的话地图不能正常显示)
    var center = new BMapGL.Point(116.385, 39.926)
    map.centerAndZoom(center, 15)

    // 创建一个矩形绘制工具
    var drawingManager = new BMapGLLib.DrawingManager(map, {
      isOpen: false, // 工具条初始化时是否开启绘制模式
      enableDrawingTool: true, // 是否显示绘制工具栏
      drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, // 工具栏位置
        offset: new BMapGL.Size(5, 5) // 工具栏偏移
      }
    })

    // 监听绘制完成事件
    drawingManager.addEventListener('overlaycomplete', function (e) {
      var overlay = e.overlay
      console.log('overlay', overlay)
      if (e.drawingMode == BMAP_DRAWING_RECTANGLE) {
        alert("绘制了一个矩形，左上角坐标：" + overlay.getBounds().getNorthWest().lng + ", " + overlay.getBounds().getNorthWest().lat + "，右下角坐标：" + overlay.getBounds().getSouthEast().lng + ", " + overlay.getBounds().getSouthEast().lat)
      }
    })

    // 打开绘制模式
    drawingManager.open();
  </script>
</body>

</html>

vue3+vite版本的

index.html配置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>知更鸟后台</title>
  <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=个人申请的key"></script>
    <!-- 下面两个都是在线链接,不是根路径 -->
  <link href="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
  <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

组件内代码为

<script setup>
import { ref, onMounted } from 'vue'
let selectedShip = ref([])
/**
 * 
 * @param {点坐标} point 
 * @param {矩形四个角坐标} polygon 
 * @returns {inside} 判断某个点是否在矩形框内,返回值为布尔值
 */
function isPointInRectangle (point, rectangleCorners) {
  const [topLeft, topRight, bottomLeft, bottomRight] = rectangleCorners
  const maxX = Math.max(topLeft.lng, topRight.lng, bottomLeft.lng, bottomRight.lng)
  const minX = Math.min(topLeft.lng, topRight.lng, bottomLeft.lng, bottomRight.lng)
  const maxY = Math.max(topLeft.lat, topRight.lat, bottomLeft.lat, bottomRight.lat)
  const minY = Math.min(topLeft.lat, topRight.lat, bottomLeft.lat, bottomRight.lat)
  return point.lng <= maxX && point.lng >= minX && point.lat <= maxY && point.lat >= minY
}

let map
let drawingManager
let rectangleOverlay
let markers = ref([]) // 用于存储标记点
let Coordinatepoints = ref([]) // 代表存储的矩形的四个角坐标
// 创建标记点函数
function createMarker(lng, lat) {
  var point = new BMapGL.Point(lng, lat)
  var myIcon = new BMapGL.Icon("/src/assets/111.webp", new BMapGL.Size(10, 10))
  var marker = new BMapGL.Marker(point, { icon: myIcon })
  markers.value.push(marker)
}

// 循环添加标记点到地图函数
function addMarkersToMap() {
  markers.value.forEach(marker => {
    map.addOverlay(marker)
  })
}
onMounted(() => {
  const center = new BMapGL.Point(116.307852, 40.057031)
  map = new BMapGL.Map("map")
  map.centerAndZoom(center, 15) //设置中心点
  var navi3DCtrl = new BMapGL.NavigationControl3D({ //添加3D旋转控件
    anchor: BMAP_ANCHOR_TOP_RIGHT   // 控件的位置在右上角
  })  // 添加3D控件
  map.addControl(navi3DCtrl) // 添加3D/2D旋转的工具图标

  createMarker(116.307852, 40.057031)  // 循环批量添加maker点
  createMarker(116.308, 40.058)
  createMarker(116.309, 40.059)
  // 批量添加标记点到地图
  addMarkersToMap()

  drawingManager = new BMapGLLib.DrawingManager(map, {   // 创建鼠标绘制工具库
    isOpen: false,
    enableDrawingTool: true,
    drawingToolOptions: {
      anchor: BMAP_ANCHOR_TOP_RIGHT,  // 位于右上角
      offset: new BMapGL.Size(5, 5),
      drawingModes: [BMAP_DRAWING_RECTANGLE],  // 只保留矩形(去掉默认全部展示)
    },
  })

  drawingManager.addEventListener('overlaycomplete', (e) => {  // 绘制图形完成时会触发的事件
    if (selectedShip.value.length > 0) {  // 当我每次绘制都会保存绘制的对象,每次绘制完成都会判断如果大于0就清空前面的,因为这里要求矩形只能画一个
      console.log('只能选择一个矩形')
      clearAll()  // 清除所有的覆盖物点
    }
    selectedShip.value.push(e.overlay)  // 将已经画好的存起来,通过长度用于判断是否存在多个覆盖物
    Coordinatepoints.value = []  // 这个是存储的每次绘制的矩形的四个点坐标,每次都是新矩形,因此每次会话都要先清空再添加
    if (e.drawingMode == BMAP_DRAWING_RECTANGLE) {  // 判断绘制的图形是否为矩形(是矩形就进if)
      // 保存矩形覆盖物
      rectangleOverlay = e.overlay  
      // 获取矩形的边界
      const bounds = rectangleOverlay.getBounds()
      const sw = bounds.getSouthWest()
      const ne = bounds.getNorthEast()

      // 计算四个角的坐标(下面四个变量获取的是矩形的四个角坐标)
      let topLeft = new BMapGL.Point(sw.lng, ne.lat)
      let topRight = ne
      let bottomLeft = sw
      let bottomRight = new BMapGL.Point(ne.lng, sw.lat)
      Coordinatepoints.value.push(topLeft, topRight, bottomLeft, bottomRight)  // 添加矩形四个角信息
      console.log('isPointInRectangle',isPointInRectangle({ lng: 116.307852, lat: 40.057031 }, Coordinatepoints.value));  // 判断当前点是否在矩形内,true/false
    }
  })

  // 传入地图对象和经纬度可以实时画轨迹线(这里模拟的是鼠标的移动事件,鼠标每次移动就调用一次将每次移动的坐标点用于绘制轨迹)
  function drawLineOnMap (map, lng, lat) {
    var point = new BMapGL.Point(lng, lat)

    if (!map.customData || !Array.isArray(map.customData.points)) {
      map.customData = { points: [point] }
    } else {
      map.customData.points.push(point)
    }
    if (map.customData.points.length > 1) {
      var polyline = new BMapGL.Polyline(map.customData.points, {
        strokeColor: "blue", // 线段颜色
        strokeWeight: 4,     // 线段宽度
        strokeOpacity: 0.7  // 线段透明度
      })
      // // 清除旧的折线
      // if (map.customData.polyline) {
      //     map.removeOverlay(map.customData.polyline);
      // }
      // 添加折线
      map.addOverlay(polyline)
      map.customData.polyline = polyline
    }
  }

  // 这段代码是鼠标经过会绘制折线
  map.addEventListener("mousemove", function (e) {
    var pixel = new BMapGL.Pixel(e.pixel.x, e.pixel.y)
    var lngLat = map.pixelToPoint(pixel)
    var lng = lngLat.lng
    var lat = lngLat.lat
    // console.log("经度：" + lng + "，纬度：" + lat)  //鼠标经过的经纬度坐标
    drawLineOnMap(map, lng, lat) //鼠标移动就绘制轨图
  })

  // 开启绘制
  drawingManager.open()
})

// 清空所有覆盖物
function clearAll () {
  // 循环遍历清除
  for (var i = 0; i < selectedShip.value.length; i++) {
    map.removeOverlay(selectedShip.value[i])
  }
  selectedShip.value.length = 0
}
</script>

<template>
  <div>
    <div id="map"></div>
    <button @click="clearAll">清除矩形</button>
  </div>
</template>

<style>
#map {
  height: 500px;
  width: 100%;
  margin: 0;
}
/* 将工具栏容器浮动到右上角 */
.BMapGLLib_Drawing {
  width: 100%;
}
.BMapGLLib_Drawing_panel {
  float: right;
  margin-right: 60px;
  margin-top: 20px;
}
/* 更改指南针的位置(默认的位置不是理想的) */
.BMap_noprint.anchorTR {
  margin-right: 50px;
  margin-top: 20px;
}
</style>

这个BMapGL版本的绘制工具功能较全,加入了矩形绘制工具栏,多个maker点自定义图标及添加到地图还有地图旋转控件的添加以及随机框选的矩形框对其传入坐标点,判断坐标点是否在矩形内,另外还增加了鼠标移动绘制轨迹等等功能(本人项目最终版也是这个版本[PS:老板让做个地图的旋转功能,但这个只能在BMapGL里面才能使用,老版本的BMap不支持这个控件,因此项目也就换新版地图了],这段代码的最终样式可以参考上面的GIF图,都还是一样的)