请问各位大佬，如何用vue3 ， 在百度地图上绘制多条扇形区域。求解答？

Question

我用html写的话可以显示出来，但是我搬运到VUE里面就会报错~

Answer 1

引入地图

 <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script>
 <div id="bmap" class="bmap"></div>
 <script>
      // 创建Map实例
      var map = new BMapGL.Map('bmap')
      // 初始化地图,设置中心点坐标和地图级别
      map.centerAndZoom(new BMapGL.Point(121.480509, 31.23592), 10) 
      // 启用 鼠标滚轮事件
      map.enableScrollWheelZoom()
 </script>

辅助函数

      /**
       * 实现获取扇形点坐标的函数。
       * @param point 原点
       * @param radius 半径 米
       * @param SRadian 开始弧度
       * @param ERadian 结束弧度
       * 在地图中绘制扇形是通过，Polygon()函数来绘制的。根据扇形弧度的总长度，来计算扇形边界点个数，然后根据圆点坐标和半径计算每个边界点的坐标，把计算好的点通过Polygon()函数在地图上绘制出来。
       * */
      function sector(point, radius, SRadian, ERadian) {
        //
        var points = [] // 创建构成多边形的点数组
        points.push(point) // 起点
        // 根据弧度 计算扇形点 分布
        var step = (ERadian - SRadian) / 15 || 15

        for (var i = SRadian; i < ERadian + 0.001; i += step) {
          // 循环 获取 圆弧上点的坐标
          points.push(EOffsetBearing(point, radius, i))
        }
        // 连接起点
        points.push(point)
        return points
      }

使用数学的方法计算需要画扇形的圆弧上的点坐标。

      /**
       * @param point 原点
       * @param dist 半径
       * @param bearing 计数
       * */
      function EOffsetBearing(point, dist, bearing) {
        // 计算1经度与原点的距离
        var lngConv = map.getDistance(point, new BMapGL.Point(point.lng + 0.1, point.lat)) * 10
        // 计算1纬度与原点的距离
        var latConv = map.getDistance(point, new BMapGL.Point(point.lng, point.lat + 0.1)) * 10
        // 正弦计算待获取的点的纬度与原点纬度差
        var lat = (dist * Math.sin((bearing * Math.PI) / 180)) / latConv
        // 余弦计算待获取的点的经度与原点经度差
        var lng = (dist * Math.cos((bearing * Math.PI) / 180)) / lngConv
        return new BMapGL.Point(point.lng + lng, point.lat + lat)
      }

根据规定的数据格式，绘制扇形。

// 数据格式是自己规定好的，方便后面获取数据。
// 这里需要注意的是，半径是以米为单位的。

 var mapDate = {
        上海: [121.480509, 31.23592, 0, 90, '上海'],
        上海2: [121.480509, 31.23592, 100, 130, '上海2']
      }
       
      function makesectors(mapDate) {
        for (var key in mapDate) {
          var temPoi = mapDate[key]
          // 圆点
          var point = new BMapGL.Point(temPoi[0], temPoi[1])
          // 弧度
          SRadian = temPoi[2]
          ERadian = temPoi[3]
          // 30000 半径 单位米
          var oval = new BMapGL.Polygon(sector(point, 30000, SRadian, ERadian), {
            strokeColor: '#ADFF2F', // 边线颜色
            strokeWeight: 1, // 边线的宽度，以像素为单位
            strokeOpacity: 0.5, // 边线透明度，取值范围0 - 1
            fillColor: '#ADFF2F', // 填充颜色
            fillOpacity: 0.5
          })
          map.addOverlay(oval)
        }
      }
      makesectors(mapDate)

然后扇形就可以了,你可以自己再根据时间情况改一下代码