uniapp使用腾讯地图实现定位，选点，距离计算和导航功能

最新推荐文章于 2025-04-17 08:34:53 发布
最新推荐文章于 2025-04-17 08:34:53 发布
阅读量8.8k 收藏 80
点赞数 8
文章标签： javascript 前端 前端框架 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52043417/article/details/124280066
版权
本文介绍了如何在微信小程序中集成腾讯地图API，实现用户位置获取、标记点展示及导航功能。步骤包括申请开发者密钥、设置安全域名、引入SDK并实例化，以及关键代码片段的演示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

HelloWorld

以下为官方文档指引:

  1. 申请开发者密钥（key）：申请密钥

  2. 开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存

    (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

  3. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1   JavaScriptSDK v1.2

  4. 安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

  5. 小程序示例

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');//引入下载好的sdk
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '申请的key'
        });
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
     });
  }
})

代码展示

总体代码
<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap map">
				<map @tap="getMapLocation" style="width: 100%; height: 426rpx;" :latitude="reportInfo.lttd"
					:longitude="reportInfo.lgtd" :markers="covers">
				</map>
			</view>
			<view class="item">
				<view class="content">
					<view class="desc solid-bottom row-info">
						<view class="text-black margin-top-sm overflow-2 item-title"><text
								class="cuIcon-location text-green text-xxl"></text>您当前所在位置: <text
								class="text-green">{{ plot.rough }}</text></view>
						<view class="text-black text-sm margin-top-sm overflow-2 item-content">
							系统已为您匹配到智能垃圾桶
						</view>
						<view class="item-content">
							编号:<text class="text-red">JN00405</text>
							<text style="margin-left: 58rpx;">距您:</text> <text class="text-red">{{distance}}</text>KM
						</view>
						<view class="uni-button-group">
							<button class="uni-button" @click="markertap"
								:styles="{'borderColor':'#678D5D'}">导航</button>
						</view>
					</view>
				</view>
			</view>
			<view class="m-footer">
					<view>
						<image src="../../static/img/garbage/xiao.png" class="sider-img" @click="showRules"></image>
					</view>
					<view class="img-footer">
						点我了解丢垃圾规则
					</view>
			</view>

		</view>
	</view>
</template>

<script>
	import QQMapWX from '../../utils/qqmap-wx-jssdk.js'
	const tMap = new QQMapWX({
		key: 'your key'
	})
	export default {
		data() {
			return {
				content:'（一）将回收价值高的可回收物率先分类投放，如报纸杂志、纸板箱、包装盒、PET塑料瓶、易拉罐等，确保这一类可回收物不被混合垃圾污染。（二）不要将已被污染、潮湿、污渍无法清除的物品投入可回收物收集容器，如被油渍污染的餐盒、食品包装盒等。瓶罐投放前倒空瓶内液体并简单清洗，有瓶盖的不需将瓶盖与瓶体分开投放，确保可回收物收集容器中的其他废品不被污染，尊重和维护他人分类的成果。（三）不确定是否可以回收（或本指引中未明确说明）的废纸、废塑料，在未被污染的情况下，请先投放至可回收物收集容器',
				// 默认坐标北京
				reportInfo: {
					lgtd: 116.39742,
					lttd: 39.909,
				},
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				//第一组为匹配的垃圾桶
				covers: [], //存放标记点数组
				isLocated: false,
				//小区
				plot: {},
				//详细地址
				address: '',
				//地址组成
				addressComponent: {
					city: "",
					district: "",
					nation: "",
					province: "",
					street: "",
					street_number: "",
				},
				distance:0.1,

			}
		},
		methods: {
			// 弹出垃圾规则提示框
			showRules(){
				uni.showModal({
					title: '请阅读以下规则',
					content: this.content,
					showCancel: false,
					confirmText: '我已了解',
					success: function(res) {
					}
				})
				
			},
			/**
			 * 获取经纬度并触发回调函数
			 * @param {Function} successCb 获取成功回调
			 * @param {Function} authDenyCb 获取失败回调
			 */
			getLocation(successCb, authDenyCb) {
				const self = this
				uni.getLocation({
					type: 'gcj02', // 'wgs84'默认gps 坐标 'gcj02'国测
					altitude: false, // 是否返回高度
					accuracy: 'best', // 精度值为20m
					geocode: true,
					success(res) {
						console.log(res)
						successCb && successCb(res)
						self.isLocated = true
						//获取经纬度
						self.reportInfo.lttd = res.latitude;
						self.reportInfo.lgtd = res.longitude;
						//标记地点
						var obj = {
							width: 30,
							height: 30,
							latitude: Number(self.reportInfo.lttd),
							longitude: Number(self.reportInfo.lgtd),
							iconPath: '../../static/img/garbage/loc.png'
						};
						//垃圾桶
						var bin = {
							id: "0",
							latitude: Number(30.89204),
							longitude: Number(120.086678),
							width: 20,
							height: 20,
							iconPath: '../../static/img/garbage/trash.png',
							title: "垃圾桶"
						};
						
						var bin2 = {
							id: "1",
							latitude: Number(32.097269),
							longitude: Number(118.91422),
							width: 20,
							height: 20,
							iconPath: '../../static/img/garbage/trash.png',
							title: "垃圾桶"
						}
						self.distance = self.getMapDistance(self.reportInfo.lttd,self.reportInfo.lgtd
						,32.097269,118.91422
						)
						var arr = [];
						arr.push(obj);
						arr.push(bin);
						arr.push(bin2);
						//标记点
						self.covers = arr;
					},
					fail(err) {
						if (
							err.errMsg ===
							'getLocation:fail 频繁调用会增加电量损耗，可考虑使用 wx.onLocationChange 监听地理位置变化'
						) {
							uni.showToast({
								title: '请勿频繁定位',
								icon: 'none'
							})
						}
						if (err.errMsg === 'getLocation:fail auth deny') {
							// 未授权
							uni.showToast({
								title: '无法定位，请重新获取位置信息',
								icon: 'none'
							})
							authDenyCb && authDenyCb()
							self.isLocated = false
						}
						if (err.errMsg === 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') {
							uni.showModal({
								content: '请开启手机定位服务',
								showCancel: false
							})
						}
					},
					complete() {
						console.log(self.reportInfo)
						tMap.reverseGeocoder({
							location: {
								latitude: self.reportInfo.lttd,
								longitude: self.reportInfo.lgtd
							},
							success: function(res) {
								console.log('解析地址成功');
								console.log(res);
								self.plot = res.result.formatted_addresses;
								self.address = res.result.address;
								self.addressComponent = res.result.address_component;
								// 省
								// let province = res.result.ad_info.province;
								// 市
								let city = res.result.ad_info.city;
								// console.log(province);
							},
							fail: function(res) {
								uni.showToast({
									title: '定位失败',
									duration: 2000,
									icon: 'none'
								});
								console.log(res);
							},
							complete: function(res) { //无论成功失败都会执行
								console.log(res);
							}
						});
					}
				})
			},
			/**
			 * 重新授权并调用定位方法
			 * @param {Function} successCb 授权成功回调
			 * @param {Function} authDenyCb 授权失败回调
			 */
			getAuthorize(successCb, authDenyCb) {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						this.getLocation(successCb, authDenyCb)
					},
					fail: (err) => {
						err = err['errMsg']
						uni.showModal({
								content: '需要授权位置信息',
								confirmText: '确认授权'
							})
							.then((res) => {
								if (res[1]['confirm']) {
									uni.openSetting({
										success: (res) => {
											if (res.authSetting['scope.userLocation']) {
												// 授权成功
												uni.showToast({
													title: '授权成功',
													icon: 'none'
												})
											} else {
												// 未授权
												uni.showToast({
													title: '授权失败',
													icon: 'none'
												})
											}
											this.getLocation(successCb, authDenyCb)
										}
									})
								}
								if (res[1]['cancel']) {
									// 取消授权
									console.log('取消')
									this.getLocation(successCb, authDenyCb)
								}
							})
					}
				})
			},
			//手动动获取定位
			getMapLocation() {
				var that = this;
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						that.reportInfo.lttd = res.latitude;
						that.reportInfo.lgtd = res.longitude;
						var obj = {
							width: 30,
							height: 30,
							latitude: that.reportInfo.lttd,
							longitude: that.reportInfo.lgtd,
							iconPath: '../../static/img/garbage/loc.png'
						};
						var arr = [];
						arr.push(obj);
						that.covers = arr;
						console.log(that.covers, "that.covers")
					},
					complete() {
						console.log(that.reportInfo)
						tMap.reverseGeocoder({
							location: {
								latitude: that.reportInfo.lttd,
								longitude: that.reportInfo.lgtd
							},
							success: function(res) {
								console.log('解析地址成功');
								console.log(res);
								that.plot = res.result.formatted_addresses;
								that.address = res.result.address;
								that.addressComponent = res.result.address_component;
								// 省
								// let province = res.result.ad_info.province;
								// 市
								let city = res.result.ad_info.city;
								// console.log(province);
							},
							fail: function(res) {
								uni.showToast({
									title: '定位失败',
									duration: 2000,
									icon: 'none'
								});
								console.log(res);
							},
							complete: function(res) { //无论成功失败都会执行
								console.log(res);
							}
						});
					}
				})
			},
			//导航到指定位置 ltt lgt
			markertap() {
				let that = this
				//调出地图传入目的地 ltt lgt
				uni.getLocation({
					success: (res) => {
						uni.openLocation({
							latitude: Number(30.89204),
							longitude: Number(120.086678),
							name: 'JN00405号垃圾桶',
							address: '垃圾桶',
							success: function() {
								console.log('success');
							},
							fail: function() {
								uni.showModal({
									title: '错误',
									content: '请检查定位是否打开',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							}
						});
					}
				})

			},
			//进行经纬度转换为距离的计算
			Rad(d) {
				return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
			},

			/*
			 计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
			 默认单位km
			*/
			getMapDistance(lat1, lng1, lat2, lng2) {
				console.log("in getMap")
				console.log(lat1)
				var radLat1 = this.Rad(lat1);
				var radLat2 = this.Rad(lat2);
				var a = radLat1 - radLat2;
				var b = this.Rad(lng1) - this.Rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				//s=s.toFixed(2);
				return s;
			},

		},
		components: {

		},
		onLoad() {
			console.log("in onload")
			this.getAuthorize()
		},
		onShow() {

		},
	}
</script>

<style>
	.map {
		border: 9rpx solid #678D5D;
		/* border-radius: 14rpx; */
	}

	.content {
		margin-top: 100rpx;
		width: 100%;
		height: 307rpx;
		border: 11rpx solid #;
		border-radius: 17rpx;
		/* color: white; */
		background-color: #ffffff;
	}

	.item {
		margin-top: 84rpx;
		border: 5px none #9E9E9E;
		border-radius: 25rpx;
		/* 		margin-left: 25rpx;
		margin-right: 25rpx; */
		box-shadow: 4px 4px 5px #999;
		padding-bottom: 30rpx;
		display: block;
		background-color: var(--white);
		overflow: hidden;
		font-weight: 700;
	}


	.item-title {
		height: 73rpx;
		/* border-bottom: 9rpx solid #678D5D; */
		margin-left: 30rpx;
		margin-right: 30rpx;
		font-size: 28rpx;
		margin-top: -48rpx;
	}

	.item-content {
		height: 62rpx;
		/* border: 3rpx solid #9E9E9E; */
		margin-left: 40rpx;
		margin-right: 40rpx;
		font-size: 34rpx;
		/* text-justify: initial; */
		/* font-style: solid; */
	}

	.uni-button-group {
		/* 		margin-top: 50px; */
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
	}

	.uni-button {
		width: 228rpx;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 12px;
		line-height: 1;
		margin: 0;
		background-color: #678D5D;
		color: white;
	}

	.sider-img {
		width: 254rpx;
		height: 306rpx;
	}

	.m-footer {
		margin-top: 162rpx;
		margin-left: 482rpx;
	}

	.img-footer {
		margin-top: -50rpx;
		border-bottom: 9rpx solid #678D5D;
		width: 300rpx;
		font-weight: 700;
	}
</style>
1. 引入腾旭地图
import QQMapWX from '../../utils/qqmap-wx-jssdk.js'
//创建实列
const tMap = new QQMapWX({
key: 'your key'
})
2. 实现用户定位功能
1. 获取用户地址
/**
 * 获取经纬度并触发回调函数
 * @param {Function} successCb 获取成功回调
 * @param {Function} authDenyCb 获取失败回调
 */
getLocation(successCb, authDenyCb) {
    const self = this uni.getLocation({
        type: 'gcj02',
        // 'wgs84'默认gps 坐标 'gcj02'国测
        altitude: false,
        // 是否返回高度
        accuracy: 'best',
        // 精度值为20m
        geocode: true,
		//是否解析地址默认为false
        success(res) {
            console.log(res) successCb && successCb(res) self.isLocated = true
            //获取经纬度
            self.reportInfo.lttd = res.latitude;
            self.reportInfo.lgtd = res.longitude;
            //标记地点
            var obj = {
                width: 30,
                height: 30,
                latitude: Number(self.reportInfo.lttd),
                longitude: Number(self.reportInfo.lgtd),
                iconPath: '../../static/img/garbage/loc.png'
            };
            var arr = [];
            arr.push(obj);
            arr.push(bin);
            arr.push(bin2);
            //标记点
            self.covers = arr;
        },
		//出错时执行的函数
        fail(err) {
            if (err.errMsg === 'getLocation:fail 频繁调用会增加电量损耗，可考虑使用 wx.onLocationChange 监听地理位置变化') {
                uni.showToast({
                    title: '请勿频繁定位',
                    icon: 'none'
                })
            }
            if (err.errMsg === 'getLocation:fail auth deny') {
                // 未授权
                uni.showToast({
                    title: '无法定位，请重新获取位置信息',
                    icon: 'none'
                }) authDenyCb && authDenyCb() self.isLocated = false
            }
            if (err.errMsg === 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') {
                uni.showModal({
                    content: '请开启手机定位服务',
                    showCancel: false
                })
            }
        },
		//完成时执行的函数
        complete() {
            //传入经纬度解析地址 
			tMap.reverseGeocoder({
                location: {
                    latitude: self.reportInfo.lttd,
                    longitude: self.reportInfo.lgtd
                },
                success: function(res) {
                    console.log('解析地址成功');
                    console.log(res);
                    self.plot = res.result.formatted_addresses;
                    self.address = res.result.address;
                    self.addressComponent = res.result.address_component;
                    // 省
                    // let province = res.result.ad_info.province;
                    // 市
                    let city = res.result.ad_info.city;
                    // console.log(province);
                },
                fail: function(res) {
                    uni.showToast({
                        title: '定位失败',
                        duration: 2000,
                        icon: 'none'
                    });
                    console.log(res);
                },
                complete: function(res) { //无论成功失败都会执行
                    console.log(res);
                }
            });
        }
    })
},
2.用户授权访问位置信息
/**
 * 重新授权并调用定位方法
 * @param {Function} successCb 授权成功回调
 * @param {Function} authDenyCb 授权失败回调
*/
getAuthorize(successCb, authDenyCb) {
	//获取用户授权
    uni.authorize({
		//需要获取权限的scope表
        scope: 'scope.userLocation',
        success: () = >{
            this.getLocation(successCb, authDenyCb)
        },
        fail: (err) = >{
            err = err['errMsg'] uni.showModal({
                content: '需要授权位置信息',
                confirmText: '确认授权'
            }).then((res) = >{
                if (res[1]['confirm']) {
                    uni.openSetting({
                        success: (res) = >{
                            if (res.authSetting['scope.userLocation']) {
                                // 授权成功
                                uni.showToast({
                                    title: '授权成功',
                                    icon: 'none'
                                })
                            } else {
                                // 未授权
                                uni.showToast({
                                    title: '授权失败',
                                    icon: 'none'
                                })
                            }
                            this.getLocation(successCb, authDenyCb)
                        }
                    })
                }
                if (res[1]['cancel']) {
                    // 取消授权
                    console.log('取消') 
					this.getLocation(successCb, authDenyCb)
                }
            })
        }
    })
},
3.用户手动选取位置
//手动动获取定位
getMapLocation() {
    var that = this;
    uni.chooseLocation({
        success: (res) = >{
            console.log(res) that.reportInfo.lttd = res.latitude;
            that.reportInfo.lgtd = res.longitude;
            var obj = {
                width: 30,
                height: 30,
                latitude: that.reportInfo.lttd,
                longitude: that.reportInfo.lgtd,
                iconPath: '../../static/img/garbage/loc.png'
            };
            var arr = [];
            arr.push(obj);
            that.covers = arr;
            console.log(that.covers, "that.covers")
        },
        complete() {
            console.log(that.reportInfo)
			tMap.reverseGeocoder({
                location: {
                    latitude: that.reportInfo.lttd,
                    longitude: that.reportInfo.lgtd
                },
                success: function(res) {
                    console.log('解析地址成功');
                    console.log(res);
                    that.plot = res.result.formatted_addresses;
                    that.address = res.result.address;
                    that.addressComponent = res.result.address_component;
                },
                fail: function(res) {
                    uni.showToast({
                        title: '定位失败',
                        duration: 2000,
                        icon: 'none'
                    });
                    console.log(res);
                },
                complete: function(res) { //无论成功失败都会执行
                    console.log(res);
                }
            });
        }
    })
},
4.调起导航到指定位置
//导航到指定位置 ltt lgt
markertap() {
    let that = this
    //调出地图传入目的地 ltt lgt
	//获取当前位置
    uni.getLocation({
        success: (res) = >{
			//成功后打开导航
            uni.openLocation({
                latitude: Number(30.89204),
                longitude: Number(120.086678),
                name: 'JN00405号垃圾桶',
                address: '垃圾桶',
                success: function() {
                    console.log('success');
                },
                fail: function() {
                    uni.showModal({
                        title: '错误',
                        content: '请检查定位是否打开',
                        showCancel: false,
                        success: function(res) {
                            if (res.confirm) {
                                console.log('用户点击确定');
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    })
                }
            });
        }
    })

},
5.计算目的地距离
//进行经纬度转换为距离的计算
Rad(d) {
	return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
},

/*
 计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
 默认单位km
*/
getMapDistance(lat1, lng1, lat2, lng2) {
	console.log("in getMap")
	console.log(lat1)
	var radLat1 = this.Rad(lat1);
	var radLat2 = this.Rad(lat2);
	var a = radLat1 - radLat2;
	var b = this.Rad(lng1) - this.Rad(lng2);
	var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
		Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
	s = s * 6378.137; // EARTH_RADIUS;
	s = Math.round(s * 10000) / 10000; //输出为公里
	//s=s.toFixed(2);
	return s;
},
YangYoungAcor
关注
Uniapp使用腾讯地图并进行标点创建和设置保姆教程
qq_53509791的博客
08-11 2291
我们在HBuilder左上角点击文件新建创建一个项目 然后下面这张图的话就是uniapp创建项目过程当中需要注意的一些点和具体的操作 然后我们创建完项目之后进入到项目pages文件夹下，创建一个新的Vue页面或者是也可以直接使用里面的Vue页面，然后我们需要打开Uniapp官网链接: https://uniapp.dcloud.net.cn/component/map.html#使用里面的内置组件当中的map组件 这里我们涉及到一个标点的创建，那么标点的创建我们可以通过设置里面的latitude和l
uniapp - 微信小程序实现腾讯地图位置标点展示，将指定地点进行标记选点并以一个图片图标展示出来（详细示例源码，一键复制开箱即用）
高级前端工程师
09-26 5680
uniapp腾讯地图，uniapp微信小程序端平台开发，uniapp地图指定位置标记标点，uniapp小程序平台地图如何标记位置高亮显示，uniapp小程序地图标点，uniapp微信小程序显示商家地图位置并且打上标志，uniapp小程序地图标记点覆盖物，uniapp小程序地图标点显示，uniapp小程序地图选点标记，uniapp微信小程序地图增加标记点，前端vue uniapp腾讯地图显示地图标记点，uniapp小程序高德地图的接入和自定义标点标记位置，uniapp微信小程序实现对地图多点或单点标记，uni
uniapp Map 计算实时定位到达某个具体位置距离 及 在uniappMap上绘制浮框
m0_65730686的博客
09-14 670
uniapp Map 计算实时定位到达某个具体位置距离 及 在uniappMap上绘制浮框
uniapp--腾讯地图驾车路线规划
前端叶荨，随手记
04-26 964
uniapp--腾讯地图驾车路线规划。
uniapp结合高德地图实现地图随机选点（高德地图 ‘AMap is not defined’ 问题的解决）
m0_51403535的博客
03-11 1008
结合高德地图实现地图随机选点（高德地图 ‘AMap is not defined’ 问题的解决）
微信小程序地图组件开发：UniApp 集成高德 / 腾讯地图 API 详解
最新发布
前端开发探索之旅
04-17 1817
通过本文介绍的方法，开发者可以在 UniApp 项目中成功集成高德地图和腾讯地图 API，为微信小程序开发出功能丰富的地图组件。在实际应用中，根据项目需求选择合适的地图服务，并不断优化地图功能，将为用户带来更优质的位置服务体验。希望本文能为广大 UniApp 开发者在地图功能开发方面提供有益的参考和帮助。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
前端vue uni-app地图定位并测算当前定位离目标位置距离
chenchuang0128的博客
06-09 3019
{{'签到' + distanceStr}}签到须知
在uniapp项目中使用腾讯地图计算用户到目的地的距离
NICKDL的博客
04-14 981
在uniapp项目中使用腾讯地图计算用户到目的地的距离 1.需先有腾讯地图秘钥（获取的过程忽略） 代码如下（示例）： <script> import QQMapWX from '@/common/js/qqmap-wx-jssdk.min.js'; export default { data () { return { distance: '0', } }, onLoad() { this.handleCalculateDistance() },
java计算经纬度距离_uni-app获取腾讯地图计算两经纬度的实际距离（可批量）
weixin_39652869的博客
11-25 637
uni-app获取腾讯地图计算两经纬度的实际距离（可批量） 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 地址 https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistance 代码 getDistance() { uni.reque...
uniapp-微信小程序腾讯地图导航
qq_42453562的博客
07-30 7214
uniapp-微信小程序地图导航 根据uniapp官方文档获取位置提供，最早在微信小程序是想使用高德地图导航的。但是最后放弃了。主要就是不方便！！！ **最后改为腾讯地图。**具体请搜索腾讯位置服务！！！！！！。参考：https://lbs.qq.com/miniProgram/plugin/pluginGuide/routePlan。 下面简单介绍下实现步骤： 1、插件申请接入： 在腾讯公众平台中， “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”，搜索 “腾讯位置服务路线规划”
uniapp调用地图，实现配送功能，并显示距离
weixin_69666355的博客
05-25 902
【代码】uniapp调用地图，实现配送功能，并显示距离。
uniapp地图选点定位h5
qq_43122566的博客
03-20 1318
在uniapp中简单使用地图的方法
微信小程序——打开地图选择位置信息完整功能实现代码(定位，可移动选点，可搜索，腾讯地图API)
04-03
小程序中打开地图选择店铺位置，地图定位选择地点实现方法如下，（仿美团外卖商家入驻店铺地址选择页面制作） 功能如下： 1. 默认地位显示地图，下面显示附近场所 2. 可输入搜索关键词，匹配地点 3. 点击地区，...
微信小程序 - 腾讯地图使用和选点连线计算距离
iotjin的专栏
04-13 6823
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类 小程序码
uni-app腾讯地图位置选点
m0_60662967的博客
01-18 1141
1.进入小程序 2.选择开发工具-------腾讯位置服务（开通）------进行登录授权------绑定开发者账号 3.找到设置------第三方设置-------点击添加插件（搜索自己搜药的） 4.开发者密钥配置 1.腾讯位置服务 - 立足生态，连接未来 2.点击添加key 微信小程序的授权APPID：在设置-------基本设置---------账号信息 5.微信小程序插件 | 腾讯位置服务 这两块内容添加在源码...
uniapp打开内置地图，实现线路规划,导航及距离计算（带demo）
热门推荐
oneya1的博客
01-16 3万+
uniapp打开内置地图，实现线路规划及导航 实现效果: 一：uniapp实现用户当前定位 1.首先打开定位权限：manifest.json文件—>源码视图—> 在 “mp-weixin” : { "permission" : { "scope.userLocation" : { "desc" : "获取位置信息" } } } 2.实现当前定位 // 初次位置授权 getAuthorize() { return new Promis
uniapp调用腾讯地图接口
weixin_44846723的博客
12-25 1万+
1.获取小程序的地理位置授权 全局配置 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } } 2.uni.authorize(OBJECT) ####### 提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实...
uni-app使用腾讯地图的-地图选点组件
star星辉的博客
12-25 1万+
需求：在H5实现地图选点功能 使用：腾讯地图的开放地图选点组件 步骤： 1、官方文档有详细介绍https://lbs.qq.com/tool/component-picker.html 2、个人操作步骤： 申请你的key 官方地址：https://lbs.qq.com/guides/startup.html 在index.html 设置 <meta name="v...
uniapp H5 实现地图选址功能
m0_56551688的博客
08-01 6924
这段时间因为项目中使用到地图选址，由于第一次在uniapp中使用地图选址功能，全部都是网上查找相关资料，遇到很多坑，后面自己从新利用map组件写了一个，下面方法列出来，uniapp腾讯地图key申请与部署就不写了，自行百度，仅供参考。...
uniapp使用腾讯地图
06-28
### 回答1： Uniapp是一种基于Vue.js的跨平台开发框架，可以快速开发出同时运行在多个平台的应用程序。而腾讯地图作为中国最大的地图服务提供商，已经被广泛应用于各类应用中。 Uniapp集成了腾讯地图SDK，通过使用腾讯地图API，实现地图相关的各种功能。开发者可以在Uniapp中引用相关的组件和模块，来快速实现地图应用。 在引入腾讯地图SDK之后，开发者可以轻松地进行地图的基本操作，包括地图展现、缩放、平移、标记、定位等。在腾讯地图SDK中还提供了路线规划、搜索、POI等高级功能，可以满足更加复杂的地图应用需求。同时，腾讯地图SDK还针对移动端做了优化，能够提供更加流畅、快速的地图展现和操作体验。 总之，通过在Uniapp中引入腾讯地图SDK，开发者可以快速简单地实现地图应用的需求，同时能够提供出色的地图展现和使用体验，为用户带来更好的服务。 ### 回答2： uniapp是一套使用Vue.js开发的跨平台开发框架，可以轻松地在多个平台上构建高性能、原生的应用程序。而腾讯地图是一款高度定制化的地图应用程序，提供了许多功能强大的地图API，帮助开发人员将地图应用程序无缝集成到他们的应用程序中。 如何使用腾讯地图？ 第一步：在腾讯地图官网上，注册一个开发者账号，并创建一个项目。在创建项目时，需要提供一些基本信息，例如应用程序密钥，以及需要使用的API类型。 第二步：在uniapp框架内，使用腾讯地图的SDK，将地图组件嵌入到应用程序中。可以通过在Vue.js组件中添加以下代码实现此目的： ```javascript <template> <view class="map-container"> <map :markers="markers" :show-location="showLocation" style="width: 100%; height: 100%;" @markertap="markertap" @regionchange="regionchange" @init="init" /> </view> </template> <script> import QQMapWX from '@/static/js/qqmap-wx-jssdk.min' import { mapState } from 'vuex' export default { data() { return { markers: [], showLocation: true, latitude: '', longitude: '' } }, onLoad() { this.initData() }, methods: { // 初始化数据 initData() { this.qqmapsdk = new QQMapWX({ key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }) }, // 点击地图标记点 markertap(e) { console.log(e) }, // 视野发生变化 regionchange(e) { console.log(e) }, // 地图初始化完成 init(e) { console.log(e) this.getLocation() }, // 获取当前位置 getLocation() { uni.getLocation({ type: 'gcj02', success: res => { console.log(res) this.latitude = res.latitude this.longitude = res.longitude this.qqmapsdk.reverseGeocoder({ location: { latitude: this.latitude, longitude: this.longitude }, success: res => { console.log(res) } }) } }) } }, computed: { ...mapState({ locationState: state => state.location }) }, onShareAppMessage() { return { title: '使用uniapp和腾讯地图构建高性能应用', path: '/pages/index/index', imageUrl: '/static/images/logo.png' } } } </script> <style> .map-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } </style> ``` 以上代码实现了在Vue.js组件中嵌入地图组件，并且使用了腾讯地图提供的api，获取了当前位置的经纬度，并且在地图中显示了位置。 需要注意的是，在使用腾讯地图时，需要在Vue.js组件的<template>部分中使用地图组件，并且在<script>部分中引入腾讯地图的SDK。而在Vue.js组件的样式部分<style>，需要设置地图组件的位置和大小。 在开发过程中，还需要注意调用合适的API，根据具体的应用程序需求，选择需要的API，完成对地图添加标记点、添加轨迹、获取地理位置信息等功能。同时，需要自行根据实际需要，调整地图组件的属性值，实现更加个性化的地图显示。 总之，使用uniapp框架集成腾讯地图，可以实现跨平台的高性能地图应用程序，具有非常广泛的应用前景。 ### 回答3： Uniapp是一款强大的跨平台应用开发工具，它可以让开发者在一次开发中同时适配多种平台，如：iOS、Android、H5等。而腾讯地图是一款实现地图展示和服务的工具，它可以为开发者提供完整的地图服务，包含地图数据、导航功能、位置定位等。 如果想在Uniapp中使用腾讯地图，首先需要在腾讯地图开放平台注册账户，并创建应用，得到应用的key，用于接入腾讯地图的API接口。 接着，在Uniapp中安装与腾讯地图相关的插件和SDK，如：tmap位置选择器插件、tmap地图SDK插件等。这些插件和SDK可以帮助开发者在Uniapp中轻松使用腾讯地图的各种功能。 在实际开发中，可以通过uni-tmap定位组件来获取设备当前位置，并将定位结果在地图上展示。同时，可以利用tmap地图SDK的接口实现地图的放大、缩小、拖动等操作，将地图上的标记点、路线规划等信息展示在地图上。 此外，Uniapp还提供了一些高级的腾讯地图组件，如：tmap-polyline组件、tmap-circle组件等，这些组件可以为开发者提供更加细致的地图展示和定位服务。 总之，通过Uniapp和腾讯地图的完美结合，开发者可以轻松实现各种地图展示和定位服务，为用户提供更好的应用体验。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值