uniapp微信小程序地图实现周边

官方说明：小程序JavascriptSDK使用指南 - 微信小程序解决方案 | 腾讯位置服务https://lbs.qq.com/product/miniapp/jssdk/

1. 先申请腾讯地图的开发者密钥，申请地址：腾讯位置服务 - 立足生态，连接未来

2. 申请密钥时，需要勾选webServiceAPI和微信小程序

3. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0，解压后，将qqmap-wx-jssdk.min.js放入到项目目录中

4. 在点击需要查询的配套设施时，调用search方法，设置搜索条件keyword和location

5. 在回调success中，将返回的结果通过marker标到地图上，或者以文本的形式展示在列表中

效果展示：

调用qqmapsdk.search方法

qqmapsdk.search({
		keyword: name,//搜索周边poi，比如：“酒店” “餐饮” “娱乐” “学校” 等等
		page_size: 5, //每页条目数，最大限制为20条，默认值10
		location: that.mapxx.latitude + ',' + that.mapxx.longitude,//①String格式：lat<纬度>,lng<经度>（例：location: ‘39.984060,116.307520’）
		success: function(res) { //搜索成功后的回调
			wx.hideToast({});
			let arrlist = [];
			for (var i = 0; i < res.data.length; i++) {
				arrlist.push({ // 获取返回结果，放到mks数组中
					title: res.data[i].title,
					latitude: res.data[i].location.lat,
					longitude: res.data[i].location.lng,
					distance: res.data[i]._distance,
				})
			}
			// 每次不用重新赋值，通过下标给需要的赋值
			that.peripheralsData = arrlist;//前台需要展示的数组
		},
		fail: function(res) {
			console.log(res);
		},
		complete: function(res) {
		}
	});

周边配套设置的完整代码部分

HTML

     
    	 
    		 
    		 周边配套
    	 
     
     
    	
     
     
    	 
     
     
    	 
    		 
    			 
    			 {{item.title}}
    		 
    		 {{item.distance}}m
    	 
     
    

CSS

// 周边设备
&_peripherals{
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    margin-bottom: 80rpx;

&_title{
    display: flex;
    justify-content: space-between;
    padding: 14px 12px;
    font-size: 14px;
    letter-spacing: 1px;
&__left{
	display: flex;
	font-size: 24rpx;
	font-weight: 600;
	color: #00A39C;
	
	&_bgbox{
		width: 6rpx;
		height: 28rpx;
		background: #00A39C;
		border-radius: 3rpx;
		margin-right: 12rpx;
	}
}
&__right{
	font-weight: 600;
	
	&__green{
		color:#00AF99;
	}
	&__yellow{
		color:#FBAD00;
	}
}
}

&_mapbox{
width: 100%;
height: 400rpx;
border-radius: 12rpx;
padding: 12px 14px;
box-sizing: border-box;

display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
&__map{
	height: 398rpx;
	width: 100%;
	border-radius: 5px;
	background-color: #fff;
}
}
&_tabs{
// padding: 12px 14px;
}

&_tabsitem{
padding: 14px 12px;

&_items{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18rpx;
	
	&_left{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		
		&_text{
			margin-left: 10rpx;
		}
	}
	&_right{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
}
}
}

JS