原文地址： https://liubing.me/vue-gaode-...

整理了下日常地图开发过程中遇到的问题及解决方法，供大家参考，文章将会持续更新。

1、地图引入问题

网上搜索了一些资料，大部分都是index.html直接引入高德地图的js文件，个人感觉没有必要，毕竟地图只是部分页面需要使用，所以这种方法直接不考虑了。
然后又找到了一种地图懒加载的方法，需要的时候按需引入地图即可，
整理了下按需加载地图的js，我们可以新建一个js文件，如loadMap.js,位置可以随意，
这里为了引入方便直接放组件同级目录了，代码如下：

/**
 * 动态加载高德地图
 *
 * @export
 * @param {*} key 高德地图key
 * @param {*} plugins 高德地图插件
 * @param {string} [v='1.4.14'] 高德地图版本
 * @returns
 */
export default function loadMap (key, plugins, v = '1.4.14') {
  return new Promise(function (resolve, reject) {
    if (typeof AMap !== 'undefined') {
      // eslint-disable-next-line no-undef
      resolve(AMap)
      return true
    }
    window.onCallback = function () {
      // eslint-disable-next-line no-undef
      resolve(AMap)
    }
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&plugin=${plugins}&callback=onCallback`
    script.onerror = reject
    document.head.appendChild(script)
  })
}

使用

需要用到的地方直接引用这个文件，再mounted的时候执行

loadMap(this.key, this.plugins, this.v)
  .then(AMap => {
      // 此处地图就加载成功了，然后就可以使用`new AMap.Map`来实例化地图了
    console.log('地图加载成功！')
  })
  .catch(() => {
    console.log('地图加载失败！')
  })

完整代码

为了更好的体验，这里加了一个loading动画，地图加载成功complete后取消loading效果。

效果图

2、获取多边形编辑的点的问题

说的直白点，就是多边形在拖动点编辑过程中知道是哪个点
看了下官网的相关文档：https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.PolyEditor
没找到相关的api，无奈只能自己写了。
大致思路就是多边形在编辑过程中其他的点的坐标是不变了，唯一变化的就是被编辑的点，在编辑过程中做个判断即可找到这个点的索引。
多边形在被编辑过程中是会触发change事件，所以可以利用这个事件写些判断，
在拿到这个点的索引后我们就可以干点其他事情了。

// 多边形的path
let polygonPath = polygon.getPath()
// 索引
let index
// change事件
polygon.on('change', (ev) => {
  const curPath = ev.target.getPath()
  for (let i = 0; i < path.length; i++) {
    // 判断一直在变化的点
    if (polygonPath[i].lng !== curPath[i].lng || polygonPath[i].lat !== curPath[i].lat) {
      index = i
      break
    }
  }
  polygonPath = JSON.parse(JSON.stringify(curPath))
  console.log('编辑点索引：', index)
})

完整代码

效果图

3、信息窗口使用问题

看了下官网信息窗口的相关例子，发现写法都不太友好，例如以下几种形式的写法：

要是按照这种写法，vue中相关事件及数据传递怎么整，后期维护还很困难，所以这种形式直接被我pass掉了，自己写一个类似的组件，放在地图上不就行了吧，自由程度高，可定制化也高。

简单的信息窗口组件

自定义了一个简单的信息窗口组件InfoWindow，显示出来后大致就长这个样子，UI样式可以自己定义，所以很方便。

组件代码

窗口位置

这是官网信息窗口在地图拖拽过程中的表现，会发现一直固定在某一个点相对位置

再看看我们写的信息窗口组件，看到差异了吧，信息窗口被固定死了。

通过审核元素你会发现官方的信息窗口的位置随着地图的拖拽在实时变化。

所以加下来我们要做的就是这个。
看了下文档，找到了地图的一个方法lngLatToContainer，
官方给出的描述是：地图经纬度坐标转为地图容器像素坐标，
实际上窗口信息在地图上显示靠的是一个坐标点，有了这个坐标点信息窗口才知道需要哪个位置进行显示，
对于信息窗口组件来说这个坐标点就是absolute定位中的top和left，对于地图来讲就是lng和lat经纬度，
所以先定一个地图的坐标点，pos: [116.397428, 39.90923]，该坐标也是地图初始化时候的中心点坐标(center)，
地图拖动过程中会触发mapmove事件，在该事件中，通过lngLatToContainer方法获取到pos点在地图容器的实时像素坐标，然后实时改变组件的top和left即可达到效果

预览

这样就差不多和官方的信息窗口差不多了。

代码完善

接下来我们将代码稍微完善以下，增加一个新功能，点击地图上的热点的时候，出现信息窗口，显示相应热点的信息。

代码

信息窗口组件

最终预览

最后，大家可以根据这个法子自定义出自己的信息窗口组件，而不用受高德地图信息窗口的约束了。

4、多边形绘制边缘自动吸附

由于高德自带的绘制工具提供的事件太少，目前就一个draw事件，
完全不满足我的需求，所以自力更生自己实现一个多边形绘制，大致思路如下：
1、点击绘制按钮，将鼠标变成十字架
2、通过地图的click事件，每点击一次用new AMap.CircleMarker生成一个圆点
3、根据所生成的圆点坐标生成一个多边形

自定义多边形绘制

定义数据

先在data中定义一些我们需要的变量数据

isDrawing: false, // 是否正在绘制
polygons: [], // 多边形集合数据
polygonsGroup: null, // 多边形OverlayGroup集合实例，方便管理
drawingPolygon: {
  polyline: null, // 绘制过程中的折线实例
  polylinePath: [], // 折线的path
  polygon: null, // 根据折线路径自动生成的多边形的实例
  pointsGroup: null, // 绘制过程中点的集合的实例
  pointOnLine: null, // 多边形边上的点的实例
  isOnPolygon: null // 点是否在多边形上
},
// 一些样式 
styles: {
  // 圆点样式option
  circleMarker: {
    radius: 4,
    strokeColor: '#010301',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: '#FFFFFF',
    fillOpacity: 1,
    bubble: true,
    cursor: 'pointer',
    clickable: true,
    zIndex: 999999
  },
  // 绘制过程中折线样式的option
  drawingPolyline: {
    strokeColor: '#dd9ab0',
    strokeWeight: 5,
    strokeStyle: 'dashed',
    strokeDasharray: [5, 20],
    bubble: true
  }
}

点击地图生成圆点

点击相应的绘制按钮后，点击地图生成一个个圆点，到时候利用这些圆点生成多边形。
先增加个地图点击事件及相应的处理方法：

// 地图点击事件
mapOnClick(ev) {
  if (!this.isDrawing) return let position = [ev.lnglat.lng, ev.lnglat.lat] // 鼠标点击的坐标
  this.addPolygonPoint(position) // 地图上增加相应的点
},
// 添加围成多边形的点
addPolygonPoint(position) {
  // 样式及坐标option
  const option = {
    ...this.styles.circleMarker,
    center: position
  }
  const circlePointMarker = new AMap.CircleMarker(option) // 单个圆点实例
  // 先判断是否存在圆点集合实例，不存在话就创建一个
  // 所有的圆点这里通过高德提供的OverlayGroup统一管理
  if (!this.drawingPolygon.pointsGroup) { // 如果不存在
    this.drawingPolygon.pointsGroup = new AMap.OverlayGroup() // 创建绘制过程中点的集合的实例
    this.GDMap.add(this.drawingPolygon.pointsGroup) // 将集合添加到地图上显示
  }
  this.drawingPolygon.pointsGroup.addOverlay(circlePointMarker) // 将点添加到集合里面
}

效果图：

生成绘制过程中的鼠标移动位置的折线

绘制点击生成圆点的同时新增绘制过程中的折线

// 新增绘制中的折线
addDrawingPolyline(path) {
  // 判断有无折线
  if (this.drawingPolygon.polyline) {
    this.drawingPolygon.polyline.setPath(path) // 有的话直接设置折线路径
  } else { // 没有的话需要创建折线
    // 折线样式及路径
    const option = {...this.styles.drawingPolyline,
      path: path
    }
    this.drawingPolygon.polyline = new AMap.Polyline(option) // 生成折线
    this.GDMap.add(this.drawingPolygon.polyline) // 地图上添加折线
  }
  this.drawingPolygon.polylinePath = path // 存一下折线的路径
},

鼠标移动过程中实时改变绘制过程中的折线路径

// 地图鼠标移动事件
mapOnMouseMove(ev) {
  if (!this.isDrawing) return
  const position = [ev.lnglat.lng, ev.lnglat.lat]
  this.setDrawingPolyline(position)
}

// 设置绘制中的折线的路径
setDrawingPolyline (position) {
  if (this.drawingPolygon.polyline) {
    // 新增的折线的路径，由上次记录折线的开始点+鼠标坐标位置点
    const linePath = [
      this.drawingPolygon.polylinePath[0], // 上次记录折线的开始点
      position // 鼠标坐标位置点
    ]
    this.drawingPolygon.polyline.setPath(linePath)
    this.drawingPolygon.polylinePath = linePath
  }
},

效果图：

连接圆点形成实时多边形

根据上面的画点我们就可以组成一个多边形了，每次点击的都执行这个方法生成或者修改多边形的path

mapOnClick (ev) {
  if (!this.isDrawing) return
  let position = [ev.lnglat.lng, ev.lnglat.lat] // 鼠标点击的坐标
  this.addPolygonPoint(position) // 地图上增加相应的点
  this.addDrawingPolyline([position, position]) // 添加绘制过程中的鼠标移动位置的折线
  this.drawPolygonByPoints() // 通过点围成多边形
}

// 根据点画区块多边形
drawPolygonByPoints () {
  const pointsGroup = this.drawingPolygon.pointsGroup
  const pointsLength = pointsGroup ? pointsGroup.getOverlays().length : 0
  if (pointsLength > 1) {
    const paths = pointsGroup.getOverlays().map(item => {
      const path = item.getCenter()
      return [path.lng, path.lat]
    })
    if (this.drawingPolygon.polygon) {
      this.drawingPolygon.polygon.setPath(paths)
    } else {
      const option = {
        ...this.styles.polygon,
        path: paths
      }
      this.drawingPolygon.polygon = new AMap.Polygon(option)
      this.drawingPolygon.polygon.setMap(this.GDMap)
    }
  }
}

效果图：

双击绘制完成

通过高德提供的dblclick双击事件来执行complateDraw完成绘制，
绘制完成的时候获取到drawingPolygon中polygon的path，将该path存起来，
通过该path在地图上添加新绘制的多边形
最后将之前的一些数据清理掉，准备下次的绘制。

// 绘制完成
complateDraw () {
  const paths = this.drawingPolygon.polygon.getPath().map(item => [item.lng, item.lat]) // 绘制完成的多边形path
  this.isDrawing = false // 取消绘制
  this.polygons.push(paths) // 添加绘制的多边形
  this.addPolygon(paths) // 地图上添加绘制的多边形
  this.clearUselessOverlays() // 清理数据
},
// 清理无用的图层
clearUselessOverlays () {
  if (!this.GDMap) return
  this.GDMap.remove(this.drawingPolygon.polyline)
  this.GDMap.remove(this.drawingPolygon.polygon)
  this.GDMap.remove(this.drawingPolygon.pointsGroup)
  this.drawingPolygon.polyline = null
  this.drawingPolygon.polygon = null
  this.drawingPolygon.pointsGroup = null
  this.drawingPolygon.polylinePath = []
},
// 添加多边形
addPolygon (paths) {
  if (!this.GDMap) return
  const option = {
    ...this.styles.polygon,
    path: paths
  }
  const polygon = new AMap.Polygon(option)
  if (!this.polygonsGroup) {
    this.polygonsGroup = new AMap.OverlayGroup()
    this.GDMap.add(this.polygonsGroup)
  }
  this.polygonsGroup.addOverlay(polygon)
}

效果图：

现有问题

上面实现了自定义的多边形绘制，但是存在一个问题，画图的时候虽然是对准这边缘画的，
但是放大后会发现有缝隙或者重叠现象，如下图所示：

线边缘自动吸附

说起来有点繁琐，有时间再写，先直接上完整代码，代码有待优化，先实现功能：

最终效果图

这样画出的来的多边形边缘就不会存在缝隙或者重叠的现象了。

在线预览

https://jsrun.net/jdyKp/edit

vue+高德地图开发采坑持续记录[2019-06-25]

1、地图引入问题

使用

完整代码

效果图

2、获取多边形编辑的点的问题

完整代码

效果图

3、信息窗口使用问题

简单的信息窗口组件

组件代码

窗口位置

相关代码

预览

代码完善

代码

信息窗口组件

最终预览

4、多边形绘制边缘自动吸附

自定义多边形绘制

定义数据

点击地图生成圆点

生成绘制过程中的鼠标移动位置的折线

连接圆点形成实时多边形

双击绘制完成

现有问题

线边缘自动吸附

最终效果图

在线预览

你可能感兴趣的:(vue.js,地图,地图开发,高德地图)