pbootcms小程序教程之腾讯地图及导航的使用

pbootcms小程序教程之腾讯地图及导航的使用!前段时间有个群友问起小程序地图怎么点击直接进行导航!刚好我也在网上查找了下相关代码,整理了下,下面就是详细的说明!

首先在wxml文件中输入地图代码,相关内容自行查阅小程序开发教程

<map class="maps" id="map" longitude="114.327007" latitude="30.432166" scale="16" style="width:100%;height:500rpx;" bindtap="mapclick" markers="{{markers}}"></map>

longitude:经度

latitude:纬度

markers:标记(这个要动态的传递数值,所以这里就使用{{markers}})

下面就是markers的数值传递,在page的data中设置markers数组的值

Page({
  data: {
    markers: [{
      iconPath: "/images/location.png",//定位图标
      id: 0,
      latitude: 30.426498,//纬度
      longitude: 114.320514,//经度
      width: 50,//图标宽
      height: 50,//图标高
    }],
  }, 
})

这样前端的地图组件就定位完成!

下一步操作就是怎么进行直接导航,这里使用微信自带的导航组件wx.openLocation(相关内容自行查阅小程序开发教程)

首先在地图上绑定一个事件,使用bindtap="mapclick" 来绑定点击地图的操作事件mapclick,然后就是设置点击事件。

mapclick: function () {
    wx.openLocation({
      latitude: 30.426498,//纬度
      longitude: 114.320514,//经度
      scale: 18,//缩放
      name: '武汉禾天姿科技有限公司',
      address: '武汉市江夏区联投大厦'
    })
  },

更多pbootcms教程请前往:

PbootCMS教程怎么修改管理员密码
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明: 本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。
如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:duhaomu@163.com

浩沐资源网 pbootcms技术 pbootcms小程序教程之腾讯地图及导航的使用 https://www.dhaomu.com/3970.html

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务