微信小程序地图，定位，仿多多自提点

一、获取用户当前定位 wx.getLocation wx.openLocation

js 复制代码

	uni.getLocation({
			type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			success: function(res) {
				const latitude = res.latitude;
				const longitude = res.longitude;
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					success: function() {
						console.log('success');
					}
				});
			},
			fail:function(error){
				console.log(error,"错误");
			}
		});

把微信的api框放上去一写报错了

getLocation:fail the api need to be declared in the requiredPrivateInfos fie

经过查询资料发现得在app.json中，即uniapp的manifest中配置一些东西

js 复制代码

	"mp-weixin": {
		"appid": "",
		"setting": {
			"urlCheck": false
		},
		"usingComponents": true,
		"permission": {
			"scope.userLocation": {
				"desc": "你的位置信息将用于小程序位置接口的效果展示"
			},
			"scope.userFuzzyLocation": {
				"desc": "你的位置信息将用于小程序位置接口的效果展示"
			}
		},
		"requiredPrivateInfos": ["getLocation"]
	},

然后就好了，ding~~ 注意重新编译才生效噢

手贱点了个拒绝，又报错了，不过没关系，清除开发者工具的缓存即可解决下面的问题

getLocation:fail auth deny

点击确定，到了这个页面，定位一点都不准确，离我现在的地方将近二十公里呢

但此时，一打开真机调试，手机上超级准，准到楼栋了，ok，手机上准就没事。

ding~~~ 注意pc端真机预览是打不开这个授权弹窗的，pc端不行就搞个提示吧，

ok，此时用户当前定位我们拿到了，我想做个类似多多买菜选择自提点的功能，拆解一下功能点： 1.将用户的定位和我们的定位匹配，比如匹配个两公里范围内的自提点。

疑问了，没有自提点咋办，多多是这么干的

2公里范围内自提点在地图上聚合显示，或许这里两公里范围还可以更大一点，多显示一点
列表显示用户附近两公里的所有自提点，并且计算出每个自提点距离用户的多远，--这个距离貌似多多算的也是直线距离呢

二、将用户的定位和我们的定位匹配

这个功能应该是要放在后端做的，流程大概是这样的，前端调用接口，传入用户当前的经纬度，然后后端根据某种公式计算，匹配出直线距离为两公里范围内的数据列表，这个上面还得要加个省份的匹配吧，不然整个数据库的自提点肯定太多了。然后呢，后端把每个计算的直线距离，自提点地址，地址点经纬度，等返回给前端。

这个公式运用到了数学中的平面三角学，当然我数学不好,我选择文心一言

js 复制代码

function calculateDistance(lat1, lon1, lat2, lon2) {
  const earthRadius = 6371; // 地球半径（单位：千米）
 
  const dLat = toRadians(lat2 - lat1);
  const dLon = toRadians(lon2 - lon1);
 
  const a = Math.pow(Math.sin(dLat / 2), 2) +
            Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) *
            Math.pow(Math.sin(dLon / 2), 2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  const distance = earthRadius * c;
 
  return distance;
}
 
function toRadians(degrees) {
  return degrees * (Math.PI / 180);
}
 
const distance = calculateDistance(39.9042, 116.4074, 31.2304, 121.4737);
console.log(distance);

网页打开高德地图搜这是哪，点击更多，分享，地址前面就有经纬度了通过对比还是比较准确的单位是km

ok，这个功能搞定了

三、2公里范围内自提点在地图上聚合显示

先捏造一点自提点数据吧，

js 复制代码

	const selfPickUpPoint = ref([{
			name: "繁荣苑自提点",
			address: "上海市繁荣苑",
			province: "上海市",
			city: "直辖市",
			area: "松江区",
			distance: "",
			lat: "31.120165",
			lot: "121.329818"
		},
		{
			name: "金色家园自提点",
			address: "上海市繁荣苑",
			province: "上海市",
			city: "直辖市",
			area: "松江区",
			distance: "",
			lat: "31.238028",
			lot: "121.467941"
		}
	])

接下来前端easy的显示一下就ok了

四、地图点聚合显示

这个以前搞过的简单，下面贴一下代码

五、最后声明

就不做那个输入地址查地址和设定地址的功能了，感觉勉强够用的，再加就要加钱了