用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2021-12-1 00:37

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

 引言


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


问题


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


方法


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

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即可。下次将介绍如何解决小程序地图切换标记点闪屏的问题。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 唐雷清 来自: 微信公众号「算法和编程之美」

推荐阅读

    最新Demo