百度地图鼠标经过划线并输出经纬度

最新推荐文章于 2023-09-12 18:44:59 发布

百里挑单

最新推荐文章于 2023-09-12 18:44:59 发布

阅读量816

点赞数

分类专栏：百度地图插件

本文链接：https://blog.csdn.net/qq_37056728/article/details/107612920

版权

百度地图同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

插件

2 篇文章 0 订阅

订阅专栏

百度地图鼠标经过划线并输出经纬度

刚刚后端想要一个鼠标经过画出线, 并输出经纬度的小demo

鼠标点击一下, 开始绘制, mousemove事件移动, 再点击, 停止

(输出的经纬度再控制台中,可以直接复制,)

⚠️ 该demo是给开发人员用的, 只完成了简单的绘制和最基本的输出, 没有太多的异常情况处理

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FtvXYIt4QEyhEbEWQasyWddHB4Qg4deT"></script>
  <title>测试123</title>
</head>

<body>
  <div id="allmap" style="width: 1500px;height:700px"></div>

  <script type="text/javascript">
    let importantIndex = 0
    let tempData = []
    let roadList = []
    let map = new BMap.Map("allmap")
    map.centerAndZoom(new BMap.Point(113.854569, 34.092119), 17)
    map.enableScrollWheelZoom()
    map.setDefaultCursor("crosshair") // 改变鼠标在页面上的形状为小手十字
    map.addEventListener("click", function (e) {
      importantIndex = importantIndex === 0 ? 1 : 0
      if (importantIndex === 1) {
        map.addEventListener("mousemove", function (e) {
          // map.clearOverlays()
          // 该判断用来停下
          if (importantIndex === 0) {
            return
          }
          tempData = []
          roadList.push(e.point)
          roadList.filter((data) => {
            tempData.push(
              new BMap.Point(data.lng, data.lat)
            )
          })
          measure(tempData)
        })
      } else {
        console.log('停止')
        console.log(JSON.stringify(tempData))
      }
    })
    function measure(tempData) {
      // 清空之前画过的
      map.clearOverlays()
      var polyline = new BMap.Polyline(
        tempData,
        {
          strokeColor: "red",
          strokeWeight: 3,
          strokeOpacity: 0.5
        }
      )
      map.addOverlay(polyline)
    }
  </script>
</body>

</html>

百里挑单

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
百度地图鼠标经过划线并输出经纬度

百度地图鼠标经过划线并输出经纬度刚刚后端想要一个鼠标经过画出线, 并输出经纬度的小demo鼠标点击一下, 开始绘制, mousemove事件移动, 再点击, 停止(输出的经纬度再控制台中,可以直接复制,)⚠️ 该demo是给开发人员用的, 只完成了简单的绘制和最基本的输出, 没有太多的异常情况处理<!DOCTYPE html><html><head> <script type="text/javascript" src="ht...
复制链接

扫一扫

专栏目录