效果展示

主要包括：借助高德或腾讯地图API → 获取当前位置 + 标记位置点 + 计算二者距离
源代码：详见本博客【资源】部分

主要参考

微信小程序地图实现点击（marker）气泡展示（callout）距离，点击回到当前位置 - 简书微信小程序地图实现点击气泡，展示callout，开发过程中遇到的需求，大致就和共享单车那个差不多，在很多个marker中点击一个marker，显示不同颜色的marker，没有...https://www.jianshu.com/p/3dcd693afc19

微信小程序之map地图 - 简书微信小程序地图操作比较简单，api也很少，使用map组件来展示。说到地图，那就先来看基础定位：定位用到wx.getLocation(OBJECT)函数，代码如下：定位成功会...https://www.jianshu.com/p/01efa02134ba

微信小程序map地图组件之拓展功能：指南针显示与否、旋转开启与否、缩放开启与否、拖动开启与否以及卫星图开启与否。

微信小程序—地图组件map-功能扩展_0禾呈0的博客-CSDN博客https://blog.csdn.net/qq_41386332/article/details/103537189

#index.jsshowCompass: true,enableZoom: true,enableScroll: true,enableRotate: true,enableSatellite: true

#index.wxmlshow-compass="{{showCompass}}"enable-rotate="{{enableRotate}}"enable-zoom="{{enableZoom}}"enable-scroll="{{enableScroll}}"enable-satellite="{{enableSatellite}}"

关键代码

index.js

var QQMapWX = require('qqmap-wx-jssdk.js');
var qqmapsdk;
Page({/*** 页面的初始数据*/data: {showCompass: true,enableZoom: true,enableScroll: true,enableRotate: true,enableSatellite: true,mapKey: 'BURBZ-XE7K3-TS43N-YRIQT-XIMFS-72F4H',latitude: '',longitude: '',distance: '',distance: '',scale: 16,currMaker: {},markers: []},/*** 回到自己位置*/controltap() {this.mapCtx.moveToLocation()this.getMyLocation()this.setData({scale: 17})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var _this = this// 实例化API核心类qqmapsdk = new QQMapWX({key: _this.data.mapKey})this.getMyLocation()},onReady: function (e) {this.mapCtx = wx.createMapContext('myMap')},// 获取我的位置getMyLocation: function () {var that = this;wx.getLocation({type: 'gcj02',success: function (res) {that.setData({latitude: res.latitude,longitude: res.longitude})let arr = [{iconPath: '位置-红色.png',width: 25,height: 25,address: '2020年4月24日20点30分 象群  农场八队底 森林边 温泉',latitude: 22.2313995,longitude: 100.3799973,id: 900000000,callout: {display: 'BYCLICK'}}, {iconPath: '位置-红色.png',width: 25,height: 25,address: '2020年10月19日20点55分 另一象群 农场八队（温泉）农地；2020年11月14日19点50分+2020年11月15日11点30分+2020年11月16日20点',latitude: 22.2320004,longitude: 100.3789978,id: 900000001,callout: {display: 'BYCLICK'}}, {iconPath: '位置-红色.png',width: 25,height: 25,address: '①2020年4月23日22点 象群 农场八队底 香蕉地；②2020年4月25日9点50分 大公象 象老四 农场八队（温泉）附近香蕉地；③2020年4月25日19点40分 大公象 农场八队（温泉）附近香蕉地',latitude: 22.2327003,longitude: 100.3809967,id: 900000002,callout: {display: 'BYCLICK'}}]that.setData({markers: arr})}})},// marker的点击事件bindmarkertap(e) {console.log('e', e)let that = thislet _markers = that.data.markerslet markerId = parseInt(e.detail.markerId)wx.showLoading({title: `${markerId}`,})_markers.forEach(item => {console.log('item', item)if (parseInt(item.id) === markerId) {console.log('item', item)that.setData({currMaker: item})}})let currMaker = that.data.currMakerconsole.log('currMaker', that.data.currMaker)qqmapsdk.calculateDistance({to: [{latitude: currMaker.latitude,longitude: currMaker.longitude}],success: function (res) {let destinationDistance = res.result.elements[0].distancelet distanceKm = `${(destinationDistance/1000)}km` let arr = []for (let i = 0; i < _markers.length; i++) {if (parseInt(_markers[i].id) === markerId) {arr.push({address: _markers[i].address,latitude: _markers[i].latitude,longitude: _markers[i].longitude,id: _markers[i].id,width: 40,height: 40,iconPath: '位置-红色.png',callout: {content: `距您${distanceKm}`,display: 'ALWAYS',color: '#333333',bgColor: '#fff',padding: 10,borderRadius: 10,borderColor: '#fff',fontSize: 16,borderWidth: 5,textAlign: 'center',},})} else {arr.push({address: _markers[i].address,latitude: _markers[i].latitude,longitude: _markers[i].longitude,id: _markers[i].id,width: 25,height: 25,iconPath: '位置-红色.png',callout: {display: 'BYCLICK'}})}}that.setData({markers: arr})wx.hideLoading({success: (res) => {console.log(arr)},})}})}
})

index.wxml

<view class="page-section-gap"><map id="myMap" show-compass="{{showCompass}}"enable-rotate="{{enableRotate}}"enable-zoom="{{enableZoom}}"enable-scroll="{{enableScroll}}"enable-satellite="{{enableSatellite}}"style="width: 100%; height: 100vh;"latitude="{{latitude}}" longitude="{{longitude}}"markers="{{markers}}"controls="{{controls}}" scale="{{scale}}" bindmarkertap="bindmarkertap"bindcontroltap="controltap"bindcallouttap="clickCallout" bindtap="clearMap" polyline="{{polyline}}" show-locationshow-scale show-compass></map><view class="contentBottomBox"><view class="location" bindtap="controltap"><image src="位置-红色.png" class="locationIcon"></image></view></view>
</view>

【小程序开发】定位功能实现相关推荐

网约叫车出行小程序开发制作功能介绍
网约叫车出行小程序开发制作功能介绍: 打车小程序网约车顺风车拼车/代驾/出租车软件,帮助用户快速匹配司机,减少用户等待时间.让车主分享空余车位和乘客分摊部分油费,绿色出行,为拼车者免去了上下班挤公交地 ...
预订选座排队叫号小程序开发制作功能介绍
该酒吧预定预订排队选座小程序,需要是用于酒吧座位预订和排队叫号场景使用.用户通过酒吧小程序360度全景视频查看酒吧环境和座位选定. 酒吧预订排队选座小程序开发制作功能有:用户注册登录会员.360全景. ...
今天吃什么转盘小程序开发制作功能介绍
帮你决定今天吃什么转盘小程序,还能领外卖优惠券,外卖红包!选择困难者的福音. 吃什么呢?今天吃什么?我是吃什么小助手,到饭点了不知道吃什么,就来看看大家今天吃什么小程序. 今天吃什么转盘小程序开发制作 ...
人才招聘微信小程序开发制作功能介绍
人才招聘微信小程序开发制作功能介绍功能详情: 1.展示职位列表 2.展示简历列表 3.企业会员中心 4.个人会员中心展示 5.首页推荐企业广告位展示 6.职位详情展示人才招聘微信小程序企业入驻及 ...
食堂团餐预定小程序开发制作功能介绍
食堂团餐预定小程序主要用于用户写字楼,食堂等针对指定区域大量订餐使用可提前设置一周菜品,允许开关周六周日来适应各种调休假期政策. 食堂团餐预定小程序开发制作功能介绍: 前端点餐:当天下单.选择开放地点 ...
微信小程序开发编辑器功能常用快捷键整理
微信小程序开发编辑器功能常用快捷键整理常用快捷键 Ctrl + L(选中当前行) Ctrl + Shift + L(选中所有匹配) Ctrl + D(选中匹配,按一次多选一个) Ctrl + U(回 ...
生活服务小程序开发的功能
在我们日常生活中,生活类,服务类的服务有很多,各种各样的店铺,包括我们熟知的小区物业等等,牵扯到我们的衣食住行,都可以归纳到我们生活服务这一类别里面,所以这样的应用场景就会非常广泛了,一方面是应用到自 ...
场馆预约小程序开发制作功能介绍
场馆预约小程序开发制作功能主要功能一.用户端: 使用功能多样,随约定随用,全自动预约羽毛球馆.智能预定,不同门店预约羽毛球馆一目了然.支持期限卡,小时卡.天卡月卡.次卡会员储值卡等多种消费.预定成功 ...
在线刷题题库微信小程序开发制作功能介绍
在线刷题题库微信小程序开发制作功能介绍 1.题库大全:支持搜索查询各类课程试题答案. 2.多试题类型:支持单选题.多选题.判断题.问答题等多种类型. 3.批量导入:支持批量导入课程试题. 4.试题纠错 ...
读书会小程序开发制作功能介绍
一款读书会小程序,能够浏览成千上万本著作,同时阅读界面功能齐全,阅读体验也不错,还能离线缓存,以及能够听书等等.让你发觉生活中的美好,增强自己的文化底蕴,里面的书籍读友们可以分享出来给你的读友们阅读. ...

【小程序开发】定位功能实现

效果展示

主要参考

关键代码

【小程序开发】定位功能实现相关推荐

最新文章

热门文章