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

最新推荐文章于 2024-09-29 16:42:54 发布
最新推荐文章于 2024-09-29 16:42:54 发布
阅读量8.3k 收藏 77
点赞数 8
文章标签： javascript 前端 前端框架 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52043417/article/details/124280066
版权

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 - 微信小程序实现腾讯地图位置标点展示，将指定地点进行标记选点并以一个图片图标展示出来（详细示例源码，一键复制开箱即用）
高级前端工程师
09-26 5005
uniapp腾讯地图，uniapp微信小程序端平台开发，uniapp地图指定位置标记标点，uniapp小程序平台地图如何标记位置高亮显示，uniapp小程序地图标点，uniapp微信小程序显示商家地图位置并且打上标志，uniapp小程序地图标记点覆盖物，uniapp小程序地图标点显示，uniapp小程序地图选点标记，uniapp微信小程序地图增加标记点，前端vue uniapp腾讯地图显示地图标记点，uniapp小程序高德地图的接入和自定义标点标记位置，uniapp微信小程序实现对地图多点或单点标记，uni
uniapp-微信小程序腾讯地图导航
qq_42453562的博客
07-30 7088
uniapp-微信小程序地图导航 根据uniapp官方文档获取位置提供，最早在微信小程序是想使用高德地图导航的。但是最后放弃了。主要就是不方便！！！ **最后改为腾讯地图。**具体请搜索腾讯位置服务！！！！！！。参考：https://lbs.qq.com/miniProgram/plugin/pluginGuide/routePlan。 下面简单介绍下实现步骤： 1、插件申请接入： 在腾讯公众平台中， “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”，搜索 “腾讯位置服务路线规划”
uniapp Map 计算实时定位到达某个具体位置距离 及 在uniappMap上绘制浮框
m0_65730686的博客
09-14 606
uniapp Map 计算实时定位到达某个具体位置距离 及 在uniappMap上绘制浮框
前端vue uni-app地图定位并测算当前定位离目标位置距离
chenchuang0128的博客
06-09 2717
{{'签到' + distanceStr}}签到须知
【uniapp】uniapp自带的地图选择位置
最新发布
m0_74094484的博客
09-29 529
1、在manifest.json下mp-weixin进行配置。2、在要使用的页面写上方法。
在uniapp项目中使用腾讯地图计算用户到目的地的距离
NICKDL的博客
04-14 938
在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 610
uni-app获取腾讯地图计算两经纬度的实际距离（可批量） 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 地址 https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistance 代码 getDistance() { uni.reque...
uniapp调用地图，实现配送功能，并显示距离
weixin_69666355的博客
05-25 740
【代码】uniapp调用地图，实现配送功能，并显示距离。
uniapp--腾讯地图驾车路线规划
前端叶荨，随手记
04-26 856
uniapp--腾讯地图驾车路线规划。
uniapp地图选点定位h5
qq_43122566的博客
03-20 1193
在uniapp中简单使用地图的方法
微信小程序——打开地图选择位置信息完整功能实现代码(定位，可移动选点，可搜索，腾讯地图API)
04-03
小程序中打开地图选择店铺位置，地图定位选择地点实现方法如下，（仿美团外卖商家入驻店铺地址选择页面制作） 功能如下： 1. 默认地位显示地图，下面显示附近场所 2. 可输入搜索关键词，匹配地点 3. 点击地区，...
uniapp利用天地图做一个地图选点
05-08
只需掌握uniapp的组件使用和天地图的API调用，就可以创建出具有地图选点、定位、搜索等复杂功能的应用。在实际开发中，记得根据项目需求进行性能优化和适配不同平台的特性，以提供最佳的用户体验。
uniapp 微信小程序配合腾讯地地图定位
m0_66482551的博客
06-18 2112
uniapp 微信小程序利用腾讯位置服务 来实现地图与定位
uni-app腾讯地图位置选点
m0_60662967的博客
01-18 1069
1.进入小程序 2.选择开发工具-------腾讯位置服务（开通）------进行登录授权------绑定开发者账号 3.找到设置------第三方设置-------点击添加插件（搜索自己搜药的） 4.开发者密钥配置 1.腾讯位置服务 - 立足生态，连接未来 2.点击添加key 微信小程序的授权APPID：在设置-------基本设置---------账号信息 5.微信小程序插件 | 腾讯位置服务 这两块内容添加在源码...
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定位点显示距离坐标
qq_40249515的博客
10-29 1051
uniapp定位点显示距离坐标一、使用步骤1.调用2.计算距离代码总结 一、使用步骤 1.调用 代码如下： this.distance(item.sourceAsMap.lat,item.sourceAsMap.lon) 2.计算距离代码 代码如下： //根据经纬度计算距离 distance(lat1, lng1) { var that = this; console.log('计算地点经纬度：', lat1, lng1); uni.getLocation({ ty.
uni-app 写H5 小程序 使用腾讯地图获取地理位置
weixin_44670546的博客
03-22 5302
uni-app 写公众号 小程序 使用腾讯地图获取地理位置 1.首先需要在腾讯地图里面申请key 2.下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1JavaScriptSDK v1.2 3.引入js文件 4.在需要的页面引入 5. 小程序代码 getLocation(){ let that = this uni.getLocation({ type: 'gcj02', success: function (res)...
uniapp+地图 实现目的地导航
m0_64931981的博客
09-02 1289
uniapp小程序实现导航功能，以下是效果图。代码标注如图所示，配置的话，请参考上一篇文章。
uniapp腾讯地图选点
05-08
UniApp 是一个基于 Vue.js 框架开发的多端开发框架，它支持编译生成微信小程序、H5、Android、iOS 等多个平台的应用。而腾讯地图选点则是基于腾讯地图 API 开发的一个功能，可以在地图上选取一个点，并获取该点的经纬度信息。在 UniApp 中使用腾讯地图选点需要先引入腾讯地图的 SDK，然后再使用相应的 API 进行开发。具体步骤可以参考腾讯地图选点的官方文档。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值