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

Posted 算法与编程之美

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序地图覆盖手绘地图的解决方法相关的知识,希望对你有一定的参考价值。

 引言

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

问题

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

方法

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

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)

以上是关于小程序地图覆盖手绘地图的解决方法的主要内容,如果未能解决你的问题,请参考以下文章

手绘地图制作的关键点之“实时导航”

如何制作手绘地图?如何将图片图层精确地对准在地图上?

谷歌地图 setClustering(ClusteringSettings) 方法无法解决

微信小程序 地图组件中marker无法使用网络图片问题

小程序解决线下一切场景

腾讯地图圆形覆盖物添加移除以及标注偏移问题总结