高德地图 画线

基于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)

})