小程序结合腾讯地图（QQMapWX）SDK做位置周边搜索在地图上展示气泡点，点击气泡展示不同状态

1.背景：

在微信小程序中，地图上展示一个坐标点周边的医院学校等周边设施，通过地图上气泡的方式。点击气泡展示不同的气泡状态，点击导航跳转到对应气泡点所在的坐标位置。

2.实现思路：

2.1布局：

地图全屏展示，地图上的位置tablist展示在地图底部，跳转导航按钮位于地图右上角。因为map属于原生标签，而且层级比较高，所以tablist和按钮都需要通过cover-view和cover-image来提高层级。官网传送门

2.2map部分：

需要在地图上做标记，通过marks进行标记点（cover即将废弃，点击跳转官网）；

地图上气泡点的点击事件是通过给map添加bindcallouttap来实现的，点击去官网查看；

获取当前点击的气泡是通过  bindcallouttap的  “点击标记点对应的气泡时触发e.detail = {markerId}”，官网中也有说明；

map跳转导航，通过wx.openLocation的api来实现的，点击去官网；

2.3 腾讯地图SDK：

需要通过坐标点来获取周边的位置，肯定需要用到第三方的SDK来查找，点击官网传送门，比较简单明了，大概看一下就会用了：

几点说明：

① 需要申请密匙；

② 加入合法域名；

③ 下载 qqmap-wx-jssdk.min.js 包并且引入；

④ 这个地方主要使用 qqmapsdk.search 查找方法（传入关键词，写入一个需要几条（不写默认10条），传入经纬度（用逗号拼接），然后对获取的数据进行处理为自己所需要的格式）；

⑤ 当然了，对于接口所返回的distance如果感觉不准确的话可以使用距离计算的方法 qqmapsdk.calculateDistance，传入起始点的坐标位置，传入终点位置（终点可以是一个点页可以是多个点，通过坐标的方式可以计算的，具体使用可以参考官网，写的也比较详细）；

3.代码实现：

3.1wxml

<map id="map" longitude="{
  {t_lng}}" latitude="{
  {t_lat}}" scale="15" markers="{
  {markers}}" class="map_map" style="width: 100%; height: 100vh;" bindcallouttap="callouttap">
	
	<!-- tab点击切换不同内容 -->
	<cover-view class="xmwzB flex tfAlignC flexSb">
		<view class="xmwzBLi {
  {index==xmwzB_index?'on':''}}" data-index='{
  {index}}' catchtap="xmwzB_click" wx:for='{
  {tabs}}' wx:key='index'>
			<image class="img" src="{
  {index!=xmwzB_index?item.ico:item.ico_active}