高德地图画线

最新推荐文章于 2024-09-20 18:05:25 发布

yuyu_2019

最新推荐文章于 2024-09-20 18:05:25 发布

阅读量400

点赞数 1

CC 4.0 BY-SA版权

分类专栏：高德地图js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/yuyu_2019/article/details/127905976

高德地图js 专栏收录该内容

17 篇文章

订阅专栏

基于AMap.MouseTool

<script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=key&plugin=AMap.Autocomplete,AMap.GeometryUtil,AMap.MouseTool"></script>

画线

var mouseTool = new AMap.MouseTool(map)

function drawPolyline() {
  mouseTool.polyline({
    strokeColor: "#3366FF",
    strokeOpacity: 1,
    strokeWeight: 4,
    // 线样式还支持 'dashed'
    strokeStyle: "solid",
    lineJoin: 'round',
    lineCap: 'round',
    // strokeStyle是dashed时有效
    // strokeDasharray: [10, 5],
  })
}

// 绘制完成触发事件
mouseTool.on('draw', function (event) {

  console.log('绘制完成')
  mouseTool.close() // 关闭画线

  let pathInfo = event.obj.getPath()
  let path = [] // 绘制点位的经纬
  pathInfo.forEach(function (item, index) {
    let arr = [item.lng, item.lat] // 地图显示用的（点编辑的时候，绘制出来再编辑）
    path.push(arr)
  })
  console.log(path)

})