小程序结合腾讯地图（QQMapWX）SDK做位置周边搜索展示

1.wxml

<view class="container">

	<view class='newHouseTitle'>
		当前位置
	</view>

	<view class="map_wrap">
		<map id="map" longitude="{
  {t_lng}}" latitude="{
  {t_lat}}" scale="15" markers="{
  {markers}}" class="map_map" bindtap="show_big_map"></map>
		<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}}"></image>
				{
  {item.name}}
			</view>
		</view>

		<view class="xmwzUl" wx:if='{
  {arrlist_cur&&arrlist_cur.length}}'>
			<view class="xmwzUl-li flex flexSb tfAlignC" wx:for='{
  {arrlist_cur}}' wx:key='index'>
				<view class="xmwzUl-li-name tfLine1" style="max-width:500rpx;">{
  {item.title}}</view>
				<view class="xmwzUl-li-add">{
  {item.distance}}m</view>
			</view>
		</view>

	</view>

</view>

2.css

/*弹性布局*/
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: box;
  flex-wrap:wrap;
}
.noWarp{
    flex-wrap:nowrap; 
}
/*元素居中*/
.alignC{
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
}
/*水平排列*/
.flexH{
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}
/*垂直排列*/
.flexV {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
/*两端对齐*/
.flexSa {
  -webkit-box-pack: justify;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  -moz-ju