微信小程序地图应用总结版

1.应用场景：展示公司位置，并打开第三方app（高德，腾讯）导航到目标位置。

（1）展示位置地图

uniapp官网提供了相关组件，uniapp-map组件https://uniapp.dcloud.net.cn/component/map.html#

具体用法：

html结构

<map style="width: 100%; height: 300px;" :latitude="startposition.lat" :longitude="startposition.lng" :markers="covers" @markertap="openMap" @tap="openMap">
</map>

 data数据

              
				startposition: {
					lat: 32.631379,//维度
					lng: 116.833490,//经度
				},
				covers: [{
					id: 1,
					latitude: 32.631379,
					longitude: 116.833490,
					iconPath: "../../static/位置.png",
					width: '50rpx',
					height: '50rpx',
					label: {
						content: '位置',
						color: '#fff',
						fontSize: 12,
						borderRadius: 5,
						padding: 5,
						textAlign: 'center',
						bgColor: '#2979ff',
					},
				}],
				address:'定位中.....'

 （2）打开第三方软件

 js方法uni.openLocation()https://uniapp.dcloud.net.cn/api/location/open-location.html#openlocation用于唤起第三方软件（真机测试有效）

			// 打开的点击事件， 传经纬度和地点名
			openMap() {
				// 打开第三方 （小程序）
				uni.openLocation({
					latitude: Number(this.startposition.lat),
					longitude: Number(this.startposition.lng),
					success: function() {
						console.log('success');
					},
					fail: (error) => {
						console.log(error);
					}
				});
			},

2.应用场景：软件初始定位

 uniapp提供的apiuni.getLocation(OBJECT)https://uniapp.dcloud.net.cn/api/location/location.html在微信端只能获取到经纬度，无法获取到详细中文地址，所以官方推荐使用第三方库，这里我使用的是腾讯地图，简单方便。

（1）注册腾讯地图，申请key

打开微信小程序JavaScript SDK地址https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview，根据官网教程注册

 （2）实现初始化当前定位信息

html部分

<view>当前位置：{{address}}</view>

data数据

address:'定位中.....'

 函数部分

        import QQMapWX from '../tx/qqmap-wx-jssdk.js';
		onLoad() {
			
			// 实例化API核心类
			let qqmapsdk = new QQMapWX({
				key: '你自己获取到的KEY'
			});
			qqmapsdk.reverseGeocoder({
				success: (res)=> {
					console.log(res);
					this.address=res.result.address
				}
			})
		},

注意import引入的路径为你下载的js文件路径

3.当前定位不准确或者需要重新选择定位位置，如改变收获地址等...

 实现该功能异常简单，直接使用uniapp提供的方法uni.chooseLocation(OBJECT)https://uniapp.dcloud.net.cn/api/location/location.html#chooselocation

实例代码：

uni.chooseLocation({
	success: function (res) {
		console.log('位置名称：' + res.name);
		console.log('详细地址：' + res.address);
		console.log('纬度：' + res.latitude);
		console.log('经度：' + res.longitude);
	}
});

4.开启定位需要的配置

manifest.json需要在mp-weixi中添加代码

		"permission": {
			"scope.userLocation": {
				"desc": "位置信息效果展示"
			}
		},
		"requiredPrivateInfos": ["chooseLocation", "getLocation"]

 也可以在配置中更改