小程序地图覆盖手绘地图的解决方法

Posted 2021-12-23 算法与编程之美

 引言

手绘地图顾名思义就是手工绘制的地图，比普通的地图更有观赏性和生动性，通过把特定的地点绘制出来，兼具实用和纪念性，同时更加具有可看性。一般在旅游景点有很多这种纸质版手绘地图。比如这种：

问题

如何在小程序地图上实现覆盖手绘地图

方法

目前在小程序实现贴图主要有三种方法：

1.小程序个性化地图扩展功能（需要钱）

2.小程序内嵌webview（初始加载速度慢，而且个人开发的小程序无法使用）

3.应用MapContext.addGroundOverlay接口

排除要钱的和不好用的，这里我们将用第三种方法来实现小程序贴图：

index.wxml

<map  id="map"  latitude="latitude"  longitude="longitude"  style="width: 100%;height:1414rpx;" > </map>

index.js

Page(  /**   * 页面的初始数据   */  data:    latitude: 30.580251,    longitude: 104.277677,  ,  /**   * 生命周期函数--监听页面加载   */  onLoad: function () this.mapCtx = wx.createMapContext('map')    this.mapCtx.addGroundOverlay(      id: 0,      src: "../image/sctu.png",      bounds:        southwest: //西南角          latitude: 30.576161,          longitude: 104.272544,        ,        northeast: //东北角          latitude: 30.585218,          longitude: 104.285232,              ,      success(res)        console.log('wp', res)      ,      fail(err)        console.log('wperr', err)          )  , )

 实验结果与讨论

最终效果如图：

注意：目前使用MapContext.addGroundOverlay实现小程序贴图在模拟器上不显示，在手机端可显示。

结语

使用MapContext.addGroundOverlay实现小程序贴图的方法比较简单，只要在js文件中应用该API即可。下次将介绍如何解决小程序地图切换标记点闪屏的问题。

实习编辑：王晓姣

稿件来源：深度学习与文旅应用实验室（DLETA）