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

    官方说明：小程序JavascriptSDK使用指南 - 微信小程序解决方案 | 腾讯位置服务icon-default.png?t=N7T8https://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方法

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

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

    HTML

    1. <view class="infoBox_peripherals">
    2.      <view class="infoBox_peripherals_title">
    3.     	 <view class="infoBox_peripherals_title__left">
    4.     		 <view class="infoBox_peripherals_title__left_bgbox">view>
    5.     		 <view>周边配套view>
    6.     	 view>
    7.      view>
    8.      <view class="infoBox_peripherals_mapbox">
    9.     	<map class="infoBox_peripherals_mapbox__map" id="map" :latitude="mapxx.latitude" :longitude="mapxx.longitude"
    10.     	:scale="mapxx.scale" :markers="mapxx.markers"
    11.     	>map>
    12.      view>
    13.      <view class="infoBox_peripherals_tabs">
    14.     	 <u-tabs :list="list"
    15.     	 :current="tabsCurrent"
    16.     	 @click="tabsClick"
    17.     	 >u-tabs>
    18.      view>
    19.      <view class="infoBox_peripherals_tabsitem">
    20.     	 <view v-for="(item,index) in peripheralsData" :key="index" class="infoBox_peripherals_tabsitem_items">
    21.     		 <view class="infoBox_peripherals_tabsitem_items_left">
    22.     			 <image src="../../static/index/location-icon1@2x.png" style="width: 26rpx;height: 34rpx;">image>
    23.     			 <view class="infoBox_peripherals_tabsitem_items_left_text">{{item.title}}view>
    24.     		 view>
    25.     		 <view class="infoBox_peripherals_tabsitem_items_right">{{item.distance}}mview>
    26.     	 view>
    27.      view>
    28.     view>

    CSS

    1. // 周边设备
    2. &_peripherals{
    3.     background: #FFFFFF;
    4.     box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
    5.     border-radius: 16rpx;
    6.     margin-bottom: 80rpx;
    7.  
    8. &_title{
    9.     display: flex;
    10.     justify-content: space-between;
    11.     padding: 14px 12px;
    12.     font-size: 14px;
    13.     letter-spacing: 1px;
    14. &__left{
    15. 	display: flex;
    16. 	font-size: 24rpx;
    17. 	font-weight: 600;
    18. 	color: #00A39C;
    19. 	
    20. 	&_bgbox{
    21. 		width: 6rpx;
    22. 		height: 28rpx;
    23. 		background: #00A39C;
    24. 		border-radius: 3rpx;
    25. 		margin-right: 12rpx;
    26. 	}
    27. }
    28. &__right{
    29. 	font-weight: 600;
    30. 	
    31. 	&__green{
    32. 		color:#00AF99;
    33. 	}
    34. 	&__yellow{
    35. 		color:#FBAD00;
    36. 	}
    37. }
    38. }
    39.  
    40. &_mapbox{
    41. width: 100%;
    42. height: 400rpx;
    43. border-radius: 12rpx;
    44. padding: 12px 14px;
    45. box-sizing: border-box;
    46.  
    47. display: flex;
    48. justify-content: center;
    49. align-items: center;
    50. background-color: #fff;
    51. &__map{
    52. 	height: 398rpx;
    53. 	width: 100%;
    54. 	border-radius: 5px;
    55. 	background-color: #fff;
    56. }
    57. }
    58. &_tabs{
    59. // padding: 12px 14px;
    60. }
    61.  
    62. &_tabsitem{
    63. padding: 14px 12px;
    64.  
    65. &_items{
    66. 	display: flex;
    67. 	align-items: center;
    68. 	justify-content: space-between;
    69. 	margin-bottom: 18rpx;
    70. 	
    71. 	&_left{
    72. 		display: flex;
    73. 		align-items: center;
    74. 		font-size: 28rpx;
    75. 		font-weight: 400;
    76. 		color: #333333;
    77. 		
    78. 		&_text{
    79. 			margin-left: 10rpx;
    80. 		}
    81. 	}
    82. 	&_right{
    83. 		font-size: 24rpx;
    84. 		font-weight: 400;
    85. 		color: #999999;
    86. 	}
    87. }
    88. }
    89. }

    JS

  • 相关阅读:
    tomcat的负载均衡、动静分离（nginx联动）
    【大数据】计算引擎：Spark核心概念
    【今天聊聊生产力】提升研发生产力的神器推荐
    土壤温湿度传感器
    浅谈综合管廊建设提速后的运维管理
    噪声系数与插入损耗
    IDEA中创建编写JSP
    Spring Cloud Loadbalancer
    浪潮服务器重置密码方法
    电脑硬盘数据恢复一般需要收费多少钱
  • 原文地址：https://blog.csdn.net/qq_43080548/article/details/132898660