当前位置:首页 > 新闻动态 > 网站文章

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

来源: 浏览:144 时间:2023-08-04

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

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

longitude:经度

latitude:纬度

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

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

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

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

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

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

mapclick: function () {
    wx.openLocation({
      latitude: 28.2174900000,//纬度
      longitude: 112.8977300000,//经度
      scale: 18,//缩放
      name: '湖南翱云网络科技有限公司',
      address: '湖南长沙岳麓区桐梓坡西路雅阁国际'
    })
  },

地址 · ADDRESS

地址:建邺区新城科技园嘉陵江东街18号2层

邮箱:309474043@qq.Com

点击查看更多案例

联系 · CALL TEL

400-8793-956

售后专线:025-65016872

业务QQ:309474043    售后QQ:1850555641

©南京安优网络科技有限公司 版权所有   苏ICP备12071769号-4  网站地图