【备忘录】uni-app的地图相关组件操作,uni-app接入腾讯地图API的具体实现

这篇具有很好参考价值的文章主要介绍了【备忘录】uni-app的地图相关组件操作,uni-app接入腾讯地图API的具体实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

官方帮助文档:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

进行一些简单的配置

Uniapp提供的位置相关的服务:

https://uniapp.dcloud.net.cn/api/location/location.html

UniApp提供的地图组件

https://uniapp.dcloud.net.cn/component/map.html

UniApp针对微信小程序,使用腾讯地图,实现地图交互+导航

文档针对微信小程序进行设置,其他端使用这些组件还需要参考uniapp官方文档是否支持对应的业务

认识组件和API

一、UniApp的map组件

组件属性速查:官方文档地址。

个人理解:地图组件是用户和地图交互的核心组件,所有的显示和选点都在map组件上实现


常用属性整理:

属性名 类型 默认值 说明 平台差异说明
longitude Number 中心经度(重要
latitude Number 中心纬度(重要
scale Number 16 缩放级别,取值范围为3-20 高德地图缩放比例与微信小程序不同
markers Array 标记点(重要
polyline Array 路线(重要 飞书小程序不支持
enable-zoom Boolean true 是否支持缩放 App-nvue 2.1.5+、微信小程序2.3.0
enable-traffic Boolean false 是否开启实时路况 App-nvue 2.1.5+、微信小程序2.7.0
show-location Boolean 显示带有方向的当前定位点(不建议用) 微信小程序、H5、百度小程序、支付宝小程序、京东小程序
polygons Array.<polygon> 多边形(可以画圈 App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序、支付宝小程序
@markertap EventHandle 点击标记点时触发,e.detail = {markerId} App-nvue 2.3.3+、H5、微信小程序、支付宝小程序
@tap EventHandle 点击地图时触发; App-nvue 微信小程序2.9支持返回经纬度

案例用法如下:

<!-- 地图组件  参数分别是:  longitude,latitude, 表示经纬度
show-location :显示带有方向的当前定位点
markers 表示地图上的标记点  polyline 表示路线 ;enable-3D是否显示3D楼块
-->
<map @tap="getMapLocation" style="width: 100vw; height: 800rpx;" :latitude="reportInfo.lttd"
     :longitude="reportInfo.lgtd" :markers="covers" enable-3D="true" >
</map>

markerspolyline对应的数值类型需要注意有格式要求。如下

1、markers(重要

标记点用于在地图上显示标记的位置 ,已数组的形式组成地图上的标记点

属性 说明 类型 必填 备注
id 标记点id Number marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。最大限制9位数
latitude 纬度 Number 浮点数,范围 -90 ~ 90
longitude 经度 Number 浮点数,范围 -180 ~ 180
title 标注点名 String 点击时显示,callout存在时将被忽略
iconPath 显示的图标 String 项目目录下的图片路径,支持相对路径写法,以’/'开头则表示相对小程序根目录;也支持临时路径
width 标注图标宽度 Number 默认为图片实际宽度
height 标注图标高度 Number 默认为图片实际高度
  • 使用maker可以实现在地图上标记目标点位或者“我的”实时位置,格式举例如下:

    //标记地点		====> 需要在地图上绘制的点
    var obj = {
        width: 30,
        height: 30,
        latitude: Number(self.reportInfo.lttd),
        longitude: Number(self.reportInfo.lgtd),
        iconPath: '../../../static/icon/6.png' // 成功绘制
    };
    //垃圾桶====> 需要在地图上绘制的点
    var bin = {
        id: "0",
        latitude: Number(24.44379),
        longitude: Number(118.08243),
        width: 20,
        height: 20,
        iconPath: '../../../static/icon/9.png', // 成功绘制
        title: "垃圾桶"
    };
    // ====> 需要在地图上绘制的点
    var bin2 = {
        id: "1",
        latitude: Number(24.44879),
        longitude: Number(118.09243),
        width: 20,
        height: 20,
        iconPath: '../../../static/icon/9.png', // 成功绘制
        title: "垃圾桶"
    }
    // 这里定位了一个集合, 并将前面给的三个标记点存入 
    var arr = [];
    arr.push(obj);
    arr.push(bin);
    arr.push(bin2);
    
2、polyline(重要,导航必须!)

指定一系列坐标点,从数组第一项连线至最后一项

属性 说明 类型 必填 备注
points 经纬度数组 Array [{latitude: 0, longitude: 0}]
color 线的颜色 String 8位十六进制表示,后两位表示alpha值,如:#0000AA
width 线的宽度 Number
dottedLine 是否虚线 Boolean 默认false
borderColor 线的边框颜色 String
borderWidth 线的厚度 Number

注意事项

  • arrowLine ,带箭头的线,默认false,微信小程序开发者工具暂不支持该属性,不用了

3、tap事件(用户点击地图获取数据

通过这个事件可以让用户在<map>组件上选点,用法如下:

  • 利用挂载tap事件方法,比如@tap="getMapLocation",打印所返回的参数类型:

    【备忘录】uni-app的地图相关组件操作,uni-app接入腾讯地图API的具体实现

    【备忘录】uni-app的地图相关组件操作,uni-app接入腾讯地图API的具体实现

所以通过tap事件就可以获取用户点击的详细经纬度 ,举个例子就知道了:

经度=target.detail.longitude;
纬度=target.detail.latitude;

二、UniApp的API接口(用得上的)

官方文档速查

1、 uni.getLocation(OBJECT)

获取当前的地理位置、速度。

这个API的使用也十分简单,需要配置一些参数(而且这些参数都是可选的),配合一个success获取结果res。这个res包含关键信息:用户当前所在的经纬度(完整结果如下),就这么简单。

【备忘录】uni-app的地图相关组件操作,uni-app接入腾讯地图API的具体实现

只是这个接口有几个坑需要注意:

  1. 以下是最好是进行配置参数:(不过貌似加了用处不大,可选吧

    type: 'gcj02',		// 'wgs84'默认gps 坐标 ;腾讯地图支持'gcj02'国测,减少误差
    altitude: false, 	// 是否返回高度 ,设置为false可以提高响应速度
    isHighAccuracy: true, 	// 是否是高精度,选是就完事...貌似没差多少5
    
  2. 如果有时候suceess方法进不去,进入fail方法提示getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json

    解决方法:添加配置解决。具体方案:https://blog.csdn.net/qq_40047019/article/details/125997964

  3. 可以尝试在用户启动界面时,向用户获取权限,那就需要用到下面的几个API了

2、uni.authorize(OBJECT)

uni 的授权方法,一般搭配uni.getSetting和uni.openSetting使用。 文档地址

  • 这个方法需要特别注意,要获取用户的位置权限,必须配置scope: 'scope.userLocation'

  • 按官方文档的说法,必须获取选取后才能执行getLocation方法,所以建议将这个方法搭载在onLoad内执行

  • 获取权限的方法就按附件内CV执行就行

  • 在微信小程序中,必须在mainfest.json文件中添加配置。如下。完整版上面有截图

    "permission": {
        "scope.userLocation": {
            "desc": "小程序将使用定位功能"
        }
    },
    
3、uni.openSetting

调起客户端小程序设置界面,返回用户设置的操作结果。也是个普通的获取权限的接口,可以配合uni.authorize(OBJECT)一起用。具体看附件,配套CV使用即可

4、uni.openLocation(OBJECT)

简单粗暴的使用应用内置地图查看位置。文档地址

  • 直接跳转到微信的地图界面,用户可以在内置的地图软件上选择是否进行导航

  • 调用这个API可以实现一个简单的导航功能(敷衍版,但也算实现导航

  • 为了用户更好的体验,建议加上属性name和address,可以提高用户体验

  • 给个案例

    uni.openLocation({ // 使用应用内置地图查看位置。  
        // 跳出去以后是可以调用系统自带的导航 并显示以下的位置信息
        latitude: Number(24.44579), // 纬度(必选)
        longitude: Number(118.08243), // 精度 (必选 ,感觉可以用作动态的地址 
        name: '康佰家厦门小药房', // 	位置名 可选
        address: '药店',
        success: (res) => {
            // console.log('成功触发导航', res);
        }
    })
    

腾讯地图API接口

一、前置

网上已经很多了,按照官方文档操作也是完全没有问题的。这里针对小程序进行设置,官方文档地址。以下4个步骤直接参考文档操作即可

  1. 申请开发者密钥(key):申请密钥

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

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

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

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

注意事项:要实现导航功能,就需要选择v1.2的SDK才行

二、在UniApp对接腾讯地图

  1. 将下好的SDK文件放到uniapp的项目目录下,我这里放在util/map目录下

  2. 新建一个页面,导入这个js

  3. 引入SDK核心类,作为这个页面的全局变量,记得配置KEY。如下

    <template>
    </template>
    
    <script>
    	import QQMapWX from '../../../util/map/qqmap-wx-jssdk.js'	// 路径修改对应的
    	const tMap = new QQMapWX({
    		key: '这里存放刚才拿到的key'
    	})
    </script>
    

至此,最基本的配置就完成了

三、学习 小程序JavaScriptSDK核心类 的几个常用方法

官方文档提供了以下方法

方法 说明
search(options:Object) 地点搜索,搜索周边poi,比如:“酒店” “餐饮” “娱乐” “学校” 等等
getSuggestion(options:Object) 用于获取输入关键字的补完与提示,帮助用户快速输入
reverseGeocoder(options:Object) 提供由坐标到坐标所在位置的文字描述的转换。输入坐标返回地理位置信息和附近poi列表
geocoder(options:Object) 提供由地址描述到所述位置坐标的转换,与逆地址解析的过程正好相反
direction(options:Object) 提供驾车,步行,骑行,公交的路线规划能力
getCityList() 获取全国城市列表数据
getDistrictByCityId(options:Object) 通过城市ID返回城市下的区县
calculateDistance(options:Object) 计算一个点到多点的步行、驾车距离
1、reverseGeocoder(Object)

提供由坐标到坐标所在位置的文字描述的转换。输入坐标返回地理位置信息和附近poi列表

  • 简单理解,就算给这个接口经纬度,可以返回这个定位对应的相关详细描述信息,包括地名、地址的组成 包含国 省 市 等等的详细信息

需要发送的类型(必发的):location (经纬度信息,具体格式参考官方文档

  • 返回的结果类型非常详细,常用的有以下几个

    • formatted_addresses.recommend ——经过腾讯地图优化过的描述方式,更具人性化特点
    • address_component——地址部件,address不满足需求时可自行拼接
    • address——简单的地图描述(大部分时候用这个就行了)

案例如下:

tMap.reverseGeocoder({ // 这个方法的作用 :提供由坐标到坐标所在位置的文字描述的转换。输入坐标返回地理位置信息和附近poi列表 
    location: { // 位置坐标 发送 获取属性的 
        latitude: self.reportInfo.lttd,
        longitude: self.reportInfo.lgtd
    },
    // 改用res,data的形式测试接收的结果
    success: function(res) { // 所以,这里返回的结果就是 : 坐标所在位置的文字描述
        console.log('坐标所在位置的文字描述', res.result);
        // 获取到的参数
        self.plot = res.result.formatted_addresses; // 存入了一个 经过腾讯地图优化过的描述方式,更具人性化特点
        self.address = res.result.address; // 也是一串地址
        // 地址的组成 包含国 省 市 等等。。的详细信息
        self.addressComponent = res.result.address_component;
        // console.log(province);
    },
    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">
				<!-- 地图组件  参数分别是:  longitude,latitude, 表示经纬度
				show-location :显示带有方向的当前定位点
				markers 表示地图上的标记点  polyline 表示路线 ;enable-3D是否显示3D楼块
				-->
				<map @tap="getMapLocation" style="width: 100vw; height: 800rpx;" :latitude="reportInfo.lttd"
					:longitude="reportInfo.lgtd" :markers="covers" enable-3D="true" >
				</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>
	</view>
</template>

<script>
	import QQMapWX from '../../../util/map/qqmap-wx-jssdk.js'
	const tMap = new QQMapWX({
		key: ''	// 存入你的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: {
			/**
			 * 获取经纬度并触发回调函数 ========== 调用这个方法 203行
			 * @param {Function} successCb 获取成功回调
			 * @param {Function} authDenyCb 获取失败回调
			 */
			getLocationA(successCb, authDenyCb) {
				const self = this // 将vue实例赋值给self以便调用
				// console.log('触发了getLocationA,参数的值分别是', successCb, authDenyCb);
				// uniapp自带的API == > https://uniapp.dcloud.net.cn/api/location/location.html
				uni.getLocation({ // 这个方法就可以获取定位
					type: 'gcj02', // 'wgs84'默认gps 坐标 'gcj02'国测
					altitude: false, // 是否返回高度
					accuracy: 'best', // 精度值为20m
					geocode: false, // 默认false,是否解析地址信息 === 文档内提示仅app平台支持,这里改为false
					// 接口调用成功的方法 === 正常触发,问题已解决,可以获取用户所在的地址信息
					success(res) {
						console.log('成功获取用户所在地址', res)
						successCb && successCb(res); // 写法很怪,
						self.isLocated = true; // 将isLocated设置为true  表示已获取了用户的当前定位
						//获取经纬度res.latitude 和  res.longitude  ===> 将经纬度赋值给vue变量
						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/icon/6.png' // 成功绘制
						};
						//垃圾桶====> 猜测是需要在地图上绘制点数
						var bin = {
							id: "0",
							latitude: Number(24.44379),
							longitude: Number(118.08243),
							width: 20,
							height: 20,
							iconPath: '../../../static/icon/9.png', // 成功绘制
							title: "垃圾桶"
						};
						// ====> 猜测是需要在地图上绘制点数
						var bin2 = {
							id: "1",
							latitude: Number(24.44879),
							longitude: Number(118.09243),
							width: 20,
							height: 20,
							iconPath: '../../../static/icon/9.png', // 成功绘制
							title: "垃圾桶"
						}
						// 这个方法是调用了测算距离的方法,算出来了两个经纬度之间的大致举例
						self.distance = self.getMapDistance(
							self.reportInfo.lttd,
							self.reportInfo.lgtd,
							24.44879,
							118.09243
						)
						// 这里定位了一个集合, 并将前面给的三个标记点存入 
						var arr = [];
						arr.push(obj);
						arr.push(bin);
						arr.push(bin2);
						//标记点集合赋值个给了vue对象covers == > 打印出来看看
						self.covers = arr;
						// console.log('vue对象covers == > 打印出来看看',self.covers );
					},
					fail(err) { // 定位获取失败后的提示
						console.log('获取定位出错', 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('进入了complete方法,用户的定位信息:', self.reportInfo)
						// tMap是腾讯地图的对象 === 这边开始调用了
						// 用法查询地址:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/qqMapwx
						tMap.reverseGeocoder({ // 这个方法的作用 :提供由坐标到坐标所在位置的文字描述的转换。输入坐标返回地理位置信息和附近poi列表 
							location: { // 位置坐标 发送 获取属性的 
								latitude: self.reportInfo.lttd,
								longitude: self.reportInfo.lgtd
							},
							// 改用res,data的形式测试接收的结果
							success: function(res) { // 所以,这里返回的结果就是 : 坐标所在位置的文字描述
								console.log('坐标所在位置的文字描述', res.result);
								// 获取到的参数
								self.plot = res.result
								.formatted_addresses; // 存入了一个 经过腾讯地图优化过的描述方式,更具人性化特点
								self.address = res.result.address; // 也是一串地址
								// 地址的组成 包含国 省 市 等等。。的详细信息
								self.addressComponent = res.result.address_component;
								// console.log(province);
							},
							fail: function(res) {
								console.log('定位获取错误', res);
							}
							// complete: function(res) { //无论成功失败都会执行  测试后也是获取一样的内容,表示可以注释掉
							// 	console.log('无论成功失败都会执行',res);
							// }
						});
					}
				})
			},


			/**
			 * 重新授权并调用定位方法  == 这个方法在电脑调试可以正常运行  在页面onload加载时调用,一解读完毕,
			 * @param {Function} successCb 授权成功回调
			 * @param {Function} authDenyCb 授权失败回调
			 */
			getAuthorize(successCb, authDenyCb) {
				// authorize是uni 的授权方法,一般搭配uni.getSetting和uni.openSetting使用。 稳定地址:https://uniapp.dcloud.net.cn/api/other/authorize.html#authorize
				uni.authorize({
					scope: 'scope.userLocation', // 需要获取权限的 scope,其中scope.userLocation 指地理位置 需要配置小程序弹出时的提示信息
					success: () => {
						this.getLocationA(successCb, authDenyCb); // 授权成功就可以获得当前的定位
					},
					fail: (err) => { // 失败则会调用弹窗提示用户是否进行授权
						err = err['errMsg']
						uni.showModal({
								content: '需要授权位置信息',
								confirmText: '确认授权'
							})
							.then((res) => { // 用户点击同意后,
								if (res[1]['confirm']) { // 看不懂
									uni.openSetting({ // 调起客户端小程序设置界面,返回用户设置的操作结果。 https://uniapp.dcloud.net.cn/api/other/setting.html#opensetting
										success: (res) => {
											if (res.authSetting['scope.userLocation']) {
												// 授权成功
												uni.showToast({
													title: '授权成功',
													icon: 'none'
												})
											} else {
												// 未授权
												uni.showToast({
													title: '授权失败',
													icon: 'none'
												})
											}
											this.getLocationA(successCb, authDenyCb) // 这里也调用了
										}
									})
								}
								if (res[1]['cancel']) {
									// 取消授权
									console.log('取消')
									this.getLocationA(successCb, authDenyCb)
								}
							})
					}
				})
			},


			//手动动获取定位  这个方法挂在<map>组件的tap事件上  ,可以目标就是通过点击地图更换用户所在的当期那位置
			getMapLocation(target) {
				// console.log('点击了地图', target);
				var that = this;
				// 将获取到的坐标赋值给vue对象
				that.reportInfo.lttd = target.detail.latitude;
				that.reportInfo.lgtd = target.detail.longitude;
				// 加入标记点
				var obj = {
					width: 30,
					height: 30,
					latitude: that.reportInfo.lttd,
					longitude: that.reportInfo.lgtd,
					iconPath: '../../../static/icon/6.png'
				};
				var arr = [];
				arr.push(obj);
				that.covers = arr;
				// 经过测试 res的报错信息是:chooseLocation:fail the api need to be declared in…e requiredPrivateInfos field in app.json/ext.json
				// console.log('进入chooseLocation的complete:',res);
				console.log('要调用txmap的参数是', that.reportInfo);
				// 在这边调用了腾讯地图的接口: 和上面方法是一样的作用,将坐标转换为文字描述
				tMap.reverseGeocoder({
					location: {
						latitude: that.reportInfo.lttd,
						longitude: that.reportInfo.lgtd
					},
					success: function(res) {
						console.log('将坐标转换为文字描述===解析地址成功',res.result.location);
						// 一样的作用,继续将地址信息存入vue对象中    
						//  ====> 但问题是:一直都是获取通用的的地址 
						that.plot = res.result.formatted_addresses;
						that.address = res.result.address;
						that.addressComponent = res.result.address_component;
						let city = res.result.ad_info.city;
					},
					fail: function(res) {
						console.log('调用接口失败了', res);
					}
				});
			},


			//导航到指定位置 ltt lgt ====> 导航点击时触发的按钮
			markertap() {
				let that = this
				//调出地图传入目的地 ltt lgt
				// console.log('1、点击导航要获取用户的位置');
				uni.getLocation({ // 1、点击导航要获取用户的位置
					success: (res) => { // 2、成功时的操作  ==== but 一直进不来这个方法
						// 添加配置解决:https://blog.csdn.net/qq_40047019/article/details/125997964
						uni.openLocation({ // 3、 使用应用内置地图查看位置。  
							// 跳出去以后是可以调用系统自带的导航 并显示以下的位置信息
							latitude: Number(24.44579), // 纬度(必选)
							longitude: Number(118.08243), // 精度 (必选 ,感觉可以用作动态的地址 
							name: '康佰家厦门小药房', // 	位置名 可选
							address: '药店',
							success: (res) => {
								// console.log('成功触发导航', res);
							},
							fail: function() { // 失败触发的方法,不管了 
								uni.showModal({
									title: '错误',
									content: '请检查定位是否打开',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							}
						});
					},
					fail: (res) => {
						console.log('方法调用失败', res);
					}
				})

			},
			//进行经纬度转换为距离的计算 ===  和下面的方法进行了绑定;也不管他
			Rad(d) {
				return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
			},

			/*
			 计算距离,参数分别为第一点的纬度,经度;第二点的纬度,经度
			 默认单位km // 封装好的方法,也不管了
			*/
			getMapDistance(lat1, lng1, lat2, lng2) {
				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触发,执行getAuthorize")
			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>


基于案例实现一个导航模块文章来源地址https://www.toymoban.com/news/detail-425824.html

  1. 先绘制大致的一个界面Demo
  2. 装载授权部分的代码
  3. 装载地图上的点
  4. 装载地图上的线

到了这里,关于【备忘录】uni-app的地图相关组件操作,uni-app接入腾讯地图API的具体实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 手机备忘录怎么设置提醒 备忘录提醒设置方法

    具备提醒功能的手机备忘录有很多,比如云便签的提醒功能十分好用,不仅可设置单次定时提醒,还能添加重复提醒、重要事项提醒或到期延时提醒等,而且提醒方式也支持应用、微信、短信、电话、邮箱及手机系统日历等多种。那这款手机备忘录怎么设置提醒?备忘录提醒

    2024年02月12日
    浏览(41)
  • uni-app--》常用组件的相关介绍

    🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页:亦世凡华、 🛺系列专栏:uni-app 🚲座右铭:人生亦可燃烧,亦可腐败,我愿燃烧,耗尽所有光芒。 👀引言         ⚓经过web前端的学习,相信大家对于前端开发有了一定深入的

    2023年04月17日
    浏览(39)
  • 手机备忘录如何批量导出来,备忘录整体导出方法介绍

    手机备忘录如何批量导出来?一些品牌的手机上有自带的备忘录,大多手机自带备忘录都不支持直接批量导出,只能通过分享或复制类的功能逐条导出,手动进行整理。 除了手机自带备忘录,一些朋友会选择在自己的手机上使用云便签备忘录,不仅可以在线添加备忘录提醒事

    2024年02月16日
    浏览(49)
  • 苹果备忘录如何转移?备忘录怎么转移到新手机?

    对于很多苹果手机的用户而言,想必都有使用备忘录的习惯吧?但是,经过长期的使用,当需要更换手机设备时,您考虑过如何转移这些记录吗? 苹果备忘录怎么转移到新手机? 如您使用的是苹果手机内置的备忘录,并且需要更换的新设备依然是苹果手机,其解决方案非常

    2024年02月13日
    浏览(59)
  • 苹果手机备忘录如何导入新手机?手机备忘录怎么转移?

    一般来说,大多数手机用户更换手机的频率是3—5年,在一部手机使用了几年之后,就会出现内存不足、系统卡顿、电池续航时间较短等问题,这时候就需要更换新的手机了。有不少苹果手机用户在更换新手机的时候,都很发愁一个问题,这就是手机备忘录如何导入新手机。

    2024年01月25日
    浏览(43)
  • 前端vue uni-app百度地图定位组件,显示地图定位,标记点,并显示详细地址

    快速实现前端百度地图定位组件,显示地图定位,标记点,并显示详细地址; 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下:     代码如下: # 百度地图定位组件,显示地图定位,标记点,并显示详细地址 #### 使用方法 ```使用方法 #安装vue-baidu-map插件

    2024年02月08日
    浏览(64)
  • stata备忘录

    1. 画图 (1)时间趋势图 等价命令 字体大小 option 字体大小option description zero no size whatsoever, vanishingly small minuscule smallest quarter_tiny third_tiny half_tiny tiny vsmall small medsmall medium medlarge large vlarge huge vhuge largest tenth one-tenth the size of the graph quarter one-fourth the size of the graph third one-thi

    2024年02月03日
    浏览(42)
  • 博文备忘录

    https://blog.csdn.net/ZQ_KING/article/details/80320080 (链接层)MAC地址——ARP协议 (网络层)IP地址——IP协议 (传输层)端口——UDP协议、TCP协议 (应用层)域名——HTTP协议、HTTPS协议 https://github.com/xiaomuzhu/front-end-interview/blob/master/docs/guide/http.md (http) https://github.com/xiaomuzhu/front-

    2024年02月08日
    浏览(43)
  • 备忘录模式(Memento)

    备忘录模式是一种行为设计模式,在不破坏封装性的前提下,允许在不暴露对象实现细节的情况下保存和恢复对象之前的状态。 一个备忘录(memento)是一个对象,它存储另一个对象在某个瞬间的内部状态,而后者称为备忘录的原发器(originator)。当需要设置原发器的检查点时,取

    2024年02月13日
    浏览(37)
  • 备忘录模式

    在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态。这样以后就可将该对象恢复到原先保存的状态。 1.1 撤销操作: 例如,在文本编辑器中,当我们对文本进行修改时,可以使用备忘录模式来实现撤销操作。每次对文本进行修改时,就保存当

    2024年02月03日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包