您现在的位置是:首页 > cms教程 > PbootCMS教程PbootCMS教程

PbootCMS小程序中腾讯地图及导航的使用方法

亭邬2023-06-11PbootCMS教程已有人查阅

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

前段时间有个群友问起小程序地图怎么点击直接进行导航!刚好我也在网上查找了下相关代码,整理了下,下面就是详细的说明!
首先在wxml文件中输入地图代码,相关内容自行查阅小程序开发教程
<map class="maps" id="map" longitude="112.8977300000" latitude="28.2174900000" 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: 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: 'xxx科技有限公司',
address: 'xxxx路'
})
},

 

本文标签:

很赞哦! ()

相关源码

  • 自适应恒温恒湿机空调机械设备营销型网站模板(自适应手机版)响应式营销型恒温恒湿机环境设备类网站pbootcms模板 蓝色营销型空调设备网站源码下载PbootCMS内核开发的网站模板,该模板适用于营查看源码
  • (自适应响应式)html5蓝色智能水表营销型网站pbootcms模板下载PbootCMS内核开发,为智能水表企业打造的营销型网站解决方案,本模板基于PbootCMS内核开发,为智能水表及相关行业企业设计,采用HTML5+CSS3技术构建,具有响应式布局。查看源码
  • (自适应)重工工业机械挖掘机机推土机网站源码下载基于PbootCMS内核开发的专业级重工机械企业网站模板,适用于挖掘机、推土机等重型工业设备展示。采用响应式设计技术,确保在各类设备上均能呈现专业视觉效果,帮助企业建立数字化展示窗口。查看源码
  • (自适应)双语网络电子摄像头设备pbootcms网站模板下载核心功能定位:基于PbootCMS开发的双语摄像头企业官网模板,深度适配产品规格书展示、实时监控演示、解决方案呈现等业务场景,支持中英文内容一键切换。查看源码
  • (PC+WAP)蓝色不锈钢簧线金属制品营销型pbootcms网站模板本模板基于PbootCMS内核开发,为不锈钢及金属制品企业量身打造。采用响应式设计,适配PC与移动设备,提供统一后台管理体验,数据实时同步更新。查看源码
  • pbootcms模板(PC+WAP)火锅加盟餐饮美食类带留言源码基于PbootCMS内核深度开发,为火锅、餐饮品牌打造的营销型解决方案。采用红色主题传递行业活力,实现PC与WAP端适配。查看源码
分享笔记 (共有 篇笔记)
验证码: