微信小程序如何实现景区手绘地图

#开发心得分享#

最近在做的小程序需要实现手绘地图的效果，查了很多网上资料，自己也研究了一下，希望我的分享能帮到有需要的人，有很多不足的地方，也欢迎大家指正。

图片上是最终的实现效果

1. 在地图中圈出自己想要展示手绘效果的区域，请UI同事帮忙设计一张和当前区域吻合的手绘地图图片，这张图片可能会比较大（不超过2M最好）。需要UI将手绘地图原图、原图压缩之后的图片（大概kb级别的）发给我们
2. 在腾讯地图开发文档-个性化地图-创建图层，搜索我们的区域位置，上传图片，调整图片透明度，缩放地图将图片和我们需要展示的区域地图吻合

    腾讯位置服务 - 立足生态，连接未来

3. 最终调整位置合适之后，获取到西南角和东北角经纬度（腾讯地图拾取坐标点：点图拾取坐标-地图开放平台|腾讯位置服务）

最终实现代码：

下面只是大概实现的方法，具体实现效果可能还需要自己细心调试

this.mapCtx = wx.createMapContext('myMap', this)
const southwest = {
        // 西南角经纬度
        longitude: 118.782455,
        latitude: 32.013559
      }

      const northeast = {
        // 东北角经纬度
        longitude: 118.799549,
        latitude: 32.024955
      }
      this.mapCtx.addGroundOverlay({
        id:888,// 手绘图图层id
        src: imageUrl,// 手绘图地址
        bounds: {
          southwest,
          northeast
        },
        zIndex:1, // 手绘地图层级
        success: (res) => {
          console.log('加载成功', res)
        },
        fail: (res) => {
            // 如果当前图层没有加载成功 可在这边获取然后再重新调用一遍
        }
       })

 可能遇到的问题：

手绘地图加载出来比较慢，加载出来之前会有1-2s显示地图底图

我的解决方案：加载两张图，可以先加载UI给的小一点的KB级别的图片，加载完成之后再加载原图，这种方式有个问题是小一点的图片会很模糊，视觉上会有一个从模糊到清晰的过度的效果，而且这种方式实现，在安卓手机图片会有锯齿状，暂时没有找到解决方案