微信小程序对接使用腾讯地图-位置选点和路线规划接口

最新推荐文章于 2024-06-11 11:23:17 发布
最新推荐文章于 2024-06-11 11:23:17 发布
阅读量1.5k 收藏 19
点赞数 2
分类专栏： TP5.1 文章标签： 小程序 php
原文链接：https://blog.csdn.net/qq_26383975/article/details/107336904
版权

微信小程序使用 腾讯位置服务插件 实现 地图选点和路线规划
（适合我这种不是专业前端的人拿过来修改一下就可以使用了）
效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实现代码

1. app.json中添加代码

"plugins":{
    "chooseLocation":{
       "version":"1.0.2",
       "provider":"wx76a9a06e5b4e693e"
    },
    "routePlan":{
      "version":"1.0.5",
      "provider":"wx50b5593e81dd937a"
    }
  },
  "permission":{
    "scope.userLocation":{
      "desc":"您的位置信息将用于小程序定位"
    }
  },

2. map.wxml 代码

<view class="main">
    <view class="row" bindtap = "clickMap">
        <view class="hintText">地图选点</view>
        <image class="rightArrow" src="{{rightArrow}}" ></image>
    </view>
    <view class="line"></view>
    <view class="row" bindtap = "routePlan">
        <view class="hintText">路线规划</view>
        <image class="rightArrow" src="{{rightArrow}}" ></image>
    </view>
</view>
<view class="main" wx:if="{{address}}" >
    <view class="addressRow" bindtap = "clickMap">
        <view class="addressHint">地图选点位置：</view>
        <view class="hintText">{{address}}</view>
    </view>
</view>

3.map.js文件代码

// pages/city/city.js
const chooseLocation = requirePlugin('chooseLocation')//地图选点结果插件实例
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		latitude:"",
		longitude:"",
		address:"",
		key: 'VEHBZ-QXKLW-YRMR4-RWZSZ-UNGOS-FLFFM',//在腾讯位置服务申请的key
		referer: '微信小程序定位', //调用腾讯位置服务相关插件的app的名称
		rightArrow:"../../images/rightArrow.png"
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {

	},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function () {
		// 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
		const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
		if(location !=null){
			console.log(location)
			this.setData({
				latitude: location.latitude,
				longitude:location.longitude,
				address:location.name
			})
		}
	},
	//腾讯位置服务地图选点
	clickMap(){
		let that = this
		//获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限
		wx.getSetting({
		success(res){
			//console.log(res)
			//scope.userLocation 就是地理授权的标志：
			//res.authSetting['scope.userLocation'] == undefined 表示初始进入该页面
			//res.authSetting['scope.userLocation'] == false 表示非初始化进入该页面 且未授权
			//res.authSetting['scope.userLocation'] == true 表示地理位置授权
			if(res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true){
				//表示非初始化进入该页面 且未授权：
				wx.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					showCancel: true,
					cancelText: '取消',
					cancelColor: '#000000',
					confirmText: '确定',
					confirmColor: '#3CC51F',
					success: (result) => {
						if(res.cancel){
							wx.showToast({
								title: '拒绝授权',
								icon: 'none',
								duration: 1000
							});
						}else if (result.confirm) {
							//调起客户端小程序设置界面，返回用户设置的操作结果。 
							//设置界面只会出现小程序已经向用户请求过的权限
							wx.openSetting({
								success: (dataAu) => {
								if(dataAu.authSetting["scope.userLocation"] == true) {
									wx.showToast({
										title: '授权成功',
										icon: 'success',
										duration: 1000
									});
									//再次授权之后，调用腾讯位置服务的地图选点插件API
									that.callQQPlugin()
								}else {
										wx.showToast({
										title: '授权失败',
										icon: 'none',
										duration: 1000
									});
								}
								}
							});
							
						}
					}
				});
				
			}else if(res.authSetting['scope.userLocation'] == undefined){
				//调用腾讯位置服务的地图选点插件API
				that.callQQPlugin()
			}else{
				//调用腾讯位置服务的地图选点插件API
				that.callQQPlugin()
			}
		}

	  })
	},
	//调用腾讯位置服务的地图选点插件API
	callQQPlugin(){
		const key = this.data.key; //使用在腾讯位置服务申请的key
		const referer = this.data.referer; //调用插件的app的名称
		const latitude = this.data.latitude
		const longitude = this.data.longitude
		if(latitude !="" && longitude !=""){
			const location = JSON.stringify({
			latitude: latitude,
			longitude: longitude
			});
			wx.navigateTo({
				url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location
			});
	   }else{
			wx.navigateTo({
				url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer 
			});
	   }
	},
	//腾讯位置服务路线规划
	routePlan(){
		let that = this
		//获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限
		wx.getSetting({
		success(res){
			//console.log(res)
			//scope.userLocation 就是地理授权的标志：
			//res.authSetting['scope.userLocation'] == undefined 表示初始进入该页面
			//res.authSetting['scope.userLocation'] == false 表示非初始化进入该页面 且未授权
			//res.authSetting['scope.userLocation'] == true 表示地理位置授权
			if(res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true){
				//表示非初始化进入该页面 且未授权：
				wx.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					showCancel: true,
					cancelText: '取消',
					cancelColor: '#000000',
					confirmText: '确定',
					confirmColor: '#3CC51F',
					success: (result) => {
						if(res.cancel){
							wx.showToast({
								title: '拒绝授权',
								icon: 'none',
								duration: 1000
							});
						}else if (result.confirm) {
							//调起客户端小程序设置界面，返回用户设置的操作结果。 
							//设置界面只会出现小程序已经向用户请求过的权限
							wx.openSetting({
								success: (dataAu) => {
								if(dataAu.authSetting["scope.userLocation"] == true) {
									wx.showToast({
										title: '授权成功',
										icon: 'success',
										duration: 1000
									});
									//再次授权之后，调用腾讯位置服务的路线规划插件API
									that.callRoutePlanPlugin()
								}else {
										wx.showToast({
										title: '授权失败',
										icon: 'none',
										duration: 1000
									});
								}
								}
							});
							
						}
					}
				});
				
			}else if(res.authSetting['scope.userLocation'] == undefined){
				//调用腾讯位置服务的路线规划插件API
				that.callRoutePlanPlugin()
			}else{
				//调用腾讯位置服务的路线规划插件API
				that.callRoutePlanPlugin()
			}
		}

	  })
	},
	 //
	 callRoutePlanPlugin(){
		let plugin = requirePlugin('routePlan')//路线规划插件
		let key = this.data.key; //使用在腾讯位置服务申请的key
		let referer = this.data.referer; //调用插件的app的名称
		let latitude = this.data.latitude
		let longitude = this.data.longitude
		if(latitude !="" && longitude !=""){
			let endPoint = JSON.stringify({ //终点
				name:this.data.address,
				latitude: latitude,
				longitude: longitude
			})
			wx.navigateTo({
				url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer+'&endPoint= ' +endPoint
			});
	    }else{
			console.log('请先选择地点')
		}
	 }
})

4.map.wxss代码

/* pages/city/city.wxss */
page{
    width: 100%;
    background: #f7f7f7;
}
.main{
    width:100%;
    margin-top: 60rpx;
}
.row{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100rpx;
    background: #ffffff;
}
.hintText{
    width:90%;
    font-size: 28rpx;
    color:#000000;
    font-family: PingFang SC;
    font-weight: 400;
    padding-left: 30rpx;
}
.rightArrow{
    width:36rpx;
    height: 36rpx;
}
.line{
    margin-left: 30rpx;
    height: 1rpx;
    background: #eeeeee;
}
/*选点具体结果*/
.addressRow{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 200rpx;
    background: #ffffff;
}
.addressHint{
    width:90%;
    font-size: 32rpx;
    color:green;
    font-family: PingFang SC;
    font-weight: bold;
    padding-left: 30rpx;
}
是誰萆微了承諾
关注
  • 2
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发中的国内外地图服务与API使用
吃不胖.
04-10 957
总结： 本文以使用腾讯地图API为例介绍了微信小程序开发中使用地图服务和API的基本步骤。通过申请API密钥、引入地图SDK、设置地图组件和调用地图API，我们可以在小程序中实现地图展示、位置定位、附近搜索等功能。在上述代码中，我们首先使用wx.getLocation获取用户当前位置的经纬度，然后使用wx.createMapContext获取地图上的中心点位置，再调用腾讯地图API的搜索服务，搜索附近的餐厅，并将搜索结果显示在地图上。在国内，我们可以使用腾讯地图服务，而在国外，我们可以使用谷歌地图服务。
如何为微信小程序添加地理位置标记和地点搜索功能
吃不胖.
10-01 1067
因此，在小程序中添加地理位置标记和地点搜索功能是非常有必要的。其中，keywords表示搜索关键词，city表示城市名称，citylimit表示是否只搜索该城市，offset表示每页显示结果数，page表示当前页数。实现地点搜索功能主要需要使用微信小程序的API wx.request()和高德地图API。在小程序中获取当前地理位置需要使用小程序的API wx.getLocation()。以上就是实现微信小程序中地理位置标记和地点搜索功能的整个过程，希望对读者有所帮助。获取高德地图API的key。
基于微信map组件完成地图标点
m0_59722227的博客
02-13 256
基于map 实现地图标点以及气泡显示
【菜狗学前端】在原生微信小程序使用腾讯地图API接口
最新发布
m0_58355897的博客
06-11 771
在原生微信小程序中调用腾讯地图API的个人总结。 (基于最近写的获取附近餐厅、搜索目标地点并进行导航这个实验)
微信小程序——地图（定位，多个标记点）
wy313622821的博客
11-25 1万+
地图（定位，多个标记点） 效果图： . . . 使用的是微信自带的腾讯地图， 使用起来方便，简单，代码也很好理解 喜欢的朋友请收藏 . . . . . . .js代码： Page({ data: { longitude: 113.14278, //地图界面中心的经度 latitude: 23.02882, //地图界面中心的纬度 markers: [ //标志点的位置 //位置0 { id: 0, iconPath: ".
uniapp-微信小程序地图功能实现
ZWP_990527的博客
04-16 1955
uniapp-微信小程序地图功能实现，从无到有。附上实现代码
微信小程序——添加地图、地图上打点、自定义地图
sinat_38011533的博客
01-15 1万+
目录 1.摘要 1.1 开发工具 1.2 开发框架 1.3 版本号 2. 添加地图 3. 地图打点 4. 个性化地图 4.1 申请开通个性化地图能力 4.2 添加小程序个性地图 4.3 自定义地图 1.摘要 1.1 开发工具 微信开发者工具、sublime、git 1.2 开发框架 wepy2.0 1.3 版本号 微信开发者工具2.9.5、subli...
微信小程序 腾讯位置服务地图选点和路线规划
12程序猿的博客
07-14 4664
微信小程序使用 腾讯位置服务插件 实现 地图选点和路线规划 效果图： 实现过程 点击“开发指南”，根据对应打开网页中的接入指引进行开发实现。 腾讯位置服务地图选点:开发指南 腾讯位置服务路线规划:开发指南 实现源码下载地址： 点击此处 ...
教你如何利用微信小程序高效地完成地图点位标注
Shids_的博客
05-15 5252
教你如何利用微信小程序高效地完成地图点位标注
微信小程序绘制线路以及marker轨迹移动
u014388322的专栏
07-06 2375
1：首先需要给绘制的线路设置坐标数据信息。2：对起点和终点设置两个marker。4：设置线路与地图边距的距离代码。3：设置小车轨迹的移动。
【uniapp】 微信小程序使用腾讯API地图、路线轨迹、marker标记点
weixin_42216995的博客
05-27 2399
腾讯地图、地图选点、marker、轨迹、路线
uniapp小程序接入腾讯地图sdk
m0_74331185的博客
03-01 3193
地图组件用于展示地图，而定位API只是获取坐标，请勿混淆两者。注意：小程序端 版本库太高也不支持 定位api。配置uniapp配置文件设置小程序的appid。使用qqmapsdk 将经纬度转化为中文数据。申请key完成之后 赋值key密钥备用。注意：匿名用户可能存在地理定位失效。在应用级生命周期位置书写定位功能。登录开放平台——-进入控制台。下载之后解压缩 放置项目。到公众号配置安全域名。
uni-app开发微信小程序使用腾讯地图选点和城市选择器插件
铁锤妹妹的博客
09-27 7564
因为开发微信小程序，所以我这里用的是腾讯地图选点插件。附上官方文档腾讯地图选择器插件腾讯地图选点插件。
微信小程序-调用腾讯地图插件实现定点，路线规划，地铁图，服务拓展（逆地址解析，地点搜索）
xq_falling的博客
11-26 1721
实现流程实现思路使用工具基础介绍小程序结构介绍整体代码结构调用插件主页分析定点出行规划服务地铁图服务接口能力逆地址解析地点搜索注意问题问题仓库地址 实现思路 选择小程序作为实现主题 通过调用api与接口服务实现功能 使用工具 微信开放者平台 关于如何申请key 申请sdk此处不做赘述网上资料很多。 基础介绍 主要由以下四种文件组成，更多信息查阅微信小程序的开发文档。网址如下： https://developers.weixin.qq.com/miniprogram/dev/framework/
uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器
weixin_46324536的博客
11-29 7001
uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器
微信小程序调用腾讯地图API进行驾车路线规划
qq_36470898的博客
07-15 6719
微信小程序调用腾讯地图API进行驾车路线规划申请key下载sdk实现代码遇到的问题 申请key 微信小程序的地图api是非常有限的，所以部分功能实现需要调用地图api.使用腾讯地图api过程如下： 首先要在腾讯地图开发平台先注册账号，申请key腾讯地图开发平台 申请完key对其进行设置 下载sdk 下载sdk并解压将其放入到你的微信小程序的目录中。jssdk v1.2 实现代码 .js文件 /...
【愚公系列】2022年02月 微信小程序-app.json配置属性之plugins
热门推荐
时光隧道
02-23 3万+
文章目录一、app.json配置属性之plugins1.添加插件2.配置插件3.使用插件3.1 本地使用3.2 跳转插件页面 一、app.json配置属性之plugins 1.添加插件 首先打开官网网址：https://mp.weixin.qq.com/wxamp/basicprofile/thirdauth?token=1843552346&lang=zh_CN 在微信公众平台后台，登录，设置-第三方服务-添加插件。 选择一个程序后点击添加就行 2.配置插件 在app.json中添加插件 {
记录小程序之调用腾讯地图做路线描绘
LLZChen的博客
07-28 953
wxml文件： <map id='map' longitude="{{longitude}}" latitude="{{latitude}}" show-compass="true" show-location="true" show-scale="true" enable-rotate="true" markers="{{markers}}" polyline="{{polyline}}" bindregionchange="regionchange" show-location style
微信小程序腾讯位置服务城市选择器
JQ971的博客
05-28 2212
腾讯城市选择器插件微信小程序插件 | 腾讯位置服务 先看文档，下面为操作步骤 1.登录微信公众平台 设置 - 第三方设置 - 插件管理 - 添加插件 - 搜索腾讯位置服务城市选择器 - 添加 2.注册登录腾讯位置服务 - 立足生态，连接未来 新建我的应用 设置WebServiceAPI 、 微信 APP ID 3.配置小程序app.json //引入插件包 "plugins": { "citySelector": { "version": "1...
微信小程序获取多个地图选点
05-15
如果你想在微信小程序中获取多个地图选点，可以使用腾讯地图提供的 JavaScript API 实现。具体步骤如下： 1. 在微信小程序中使用 `web-view` 组件，将腾讯地图的 JavaScript API 引入到小程序中。 2. 在页面中创建...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值