小程序实现两种导航功能

第一种：导航到店

第二种：点击地图标记

小程序map组件用的是腾讯地图，我这里两种方法都是用经纬度来获取定位，先在腾讯地图经纬度查询,查询到后，再修改data里相对应的longitude和latitude就可以了，代码如下

<!--wxml--><!--导航到店-->
<view class="item"><image class="item_img4" src="../../images/map.png"></image><view class="look">{{map}}</view><button bindtap="getLocationInfo" class="item_dd">{{stop}}</button><view class="right_arrow" bindtap="getLocationInfo"></view>
</view><!--显示地图-->
<!--markers 标记点-->
<!--show-location  显示带有方向的当前定位点-->
<!--scale  缩放级别，取值范围为3-20-->
<map class="map" longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="16" markers="{{markers}}" bindmarkertap="clickMap" data-markers='{{markers[0]}}' show-location></map>

<!--wxss-->.map{width: 100%;height: 800rpx;
}
.item{display: flex;padding: 5rpx;background: white;align-items: center;border-bottom: 1px solid gainsboro;height: 100rpx;
}
.item_img4{width: 130rpx;height: 50rpx;margin-left: 65rpx;margin-right: 25rpx;
}
.look{width: 700rpx;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;margin-bottom: 80rpx;margin-top: 90rpx;margin-right: 40rpx;margin-left: 15rpx;
}
.item_dd{font-size: 35rpx;color: gray;margin-left: 145rpx;margin-right: 65rpx;margin-top: 20rpx;width: 100%;background:white;border: none;text-align: left;padding: 0px;line-height: 1.3;font-size: 16px;
}
.item_dd::after{border: none;border-radius: 0;
}
.right_arrow{border: solid black;border-width: 0 3px 3px 0;padding: 3px;position: absolute;right: 15px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);margin-top: 10rpx;
}

<!--js-->var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;Page({data: {stop: '导航到店',map: '查看地图',markers: [{id: 0,name: 'XXX',address: 'XXX',longitude: 109.79158, // 经度latitude: 20.684562, // 纬度width: 50,height: 50}]},
onLoad() {qqmapsdk = new QQMapWX({key: 'MTYBZ-H5LWG-FPCQK-IS2LT-KKQMO-5OBUX'});},
//位置详情隐私areaTips: function (e) {Dialog.alert({message: '开启详细定位，可以增加信息的真实感，便于你的信息更容易被附近的人所查看。但是可能涉及定位隐私的泄露！',}).then(() => {// on close});},//获取定位openMap: function (e) {this.updateMapCompass(this);},//获取定位updateMapCompass: function (that) {wx.authorize({scope: 'scope.userLocation',success: () => {that.setData({isLocaltion: true})that.getLocationInfo();},fail: () => {that.setData({isLocaltion: false})}})},//获取位置信息getLocationInfo: function () {var that = this;that.setData({locationStatus: 0,localMsg: '定位中'})wx.getLocation({type: 'gcj02',success: function (res) {console.log('getLocation:', res)qqmapsdk.reverseGeocoder({location: {latitude: res.latitude,longitude: res.longitude},success: function (res) {console.log('reverseGeocoder', res);that.setData({locationStatus: 1,localMsg: '定位成功',localName: res.result.ad_info.district})//赋值that.data.latitude = res.result.location.lat;that.data.longitude = res.result.location.lng;that.setData({//address: res.result.address})//跳转地图wx.openLocation({latitude: that.data.markers[0].latitude,longitude: that.data.markers[0].longitude,name: that.data.markers[0].name,address: that.data.markers[0].address,scale: 18})},fail: function (res) {console.log(res);that.setData({locationStatus: 2,localMsg: '定位失败'})},complete: function (res) {console.log(res);}});},clickMap(e){let markers = e.currentTarget.dataset.markerswx.getLocation({type:'wgs84',success(res){wx.openLocation({latitude:markers.latitude,longitude:markers.longitude,name:markers.name,address:markers.address,scale:18})},fail(err){wx.showModal({title:'需要授权',content:'需要授权位置信息，去设置开启位置权限',confirmText:'去设置',success(res){if(res.confirm){wx.openSetting()}}})}})},})

最终效果：

小程序实现两种导航功能相关推荐

ETH：Windows搭建ETH(区块链技术)利用Web端和小程序端两种方式调用ETH上的SC智能合约
ETH:Windows搭建ETH(区块链技术)利用Web端和小程序端两种方式调用ETH上的SC智能合约目录 1.Geth安装.配置文件.与ETH节点交互 1.1.下载并安装好geth客户端 1.2. ...
css卷轴动画小程序,微信小程序动画两种实现方式
开发小程序,实现动画功能,有两种实现方式,下面来看看具体怎么做: JS动画利用小程序API提供的wx.createAnimation(OBJECT)实现,API中是这样说:创建一个动画实例anima ...
微信小程序文件下载两种方式
1. 基本url方式下载(自定义下载文件名称) downloadDailyYear: function() {util.get(api.downloadDailyYear).then(function ...
Arduino通过USB转TTL无BootLoader烧录程序的两种办法
Arduino通过USB转TTL无BootLoader(引导程序)烧录程序的两种办法注意 (这个实验室基于stm32duino的,avr单片机并不直接通用,不过如果你准备尝试使用串口来给avr单片机 ...
运行python程序的两种方式交互式和文件式_Python基础知识2
运行Python程序的两种方式小白学习,如有错误欢迎指点一.每位小白写的第一个Python程序 1.运行Python程序的两种方式 1.1 交互式模式(即时对话) 打开cmd,打开Python解释 ...
微信小程序实现两个数之间的运算
微信小程序实现两个数之间的运算要求:创建一个微信小程序实现两个数字的比较运算.加法运算.减法运算.乘法运算或者除法运算中的一种,效果如图(这里我写的包含了所有运算,可根据需要自行选择): app.j ...
微信小程序的一种全局数据共享Mobx
学习的B站黑马程序员课程 https://www.bilibili.com/video/BV1834y1676P?p=81&spm_id_from=pageDriver 微信小程序的一种全 ...
运行python程序的两种方式交互式和文件式_教你如何编写、保存与运行 Python 程序...
第一步接下来我们将看见如何在 Python 中运行一个传统的"Hello World"程序.Python教程本章将会教你如何编写.保存与运行 Python 程序. 通过 Pyth ...
JAVA是纯什么编程语言_JAVA，语言是纯编程语言，JAVA，程序分为两种
JAVA,语言是纯编程语言,JAVA,程序分为两种答: 面向对象;对象 Application;Java应用程序;应用程序 Applet;Java小程序;小程序商业银行最重要的负债业务是答:吸收 ...

小程序实现两种导航功能

小程序实现两种导航功能相关推荐

最新文章

热门文章

小程序 实现两种导航功能

小程序 实现两种导航功能相关推荐

最新文章

热门文章

小程序实现两种导航功能

小程序实现两种导航功能相关推荐