微信小程序使用map组件实现检索(定位位置)周边的POI功能示例

微信小程序使用微信小程序使用map组件实现检索组件实现检索(定位位置定位位置)周边的周边的POI功能示例功能示例

主要介绍了微信小程序使用map组件实现检索(定位位置)周边的POI功能,涉及微信小程序基于map组件与高德地图PAI接口的定位操

作相关使用技巧,需要的朋友可以参考下

本文实例讲述了微信小程序使用map组件实现检索(定位位置)周边的POI功能。分享给大家供大家参考，具体如下：

声明声明

bug： 页面顶部分类【汽车服务、汽车销售等】列表和页脚的详细地址在真机测试是会出现不显示问题？

造成原因：在小程序map组件的同一区域，map组件的视图层比普通的文本视图层要高，所以在真机会遮挡！

解决办法：将该文本视图采用cover-view，放在map中。

<view class="map_container">

<map class="map" longitude="{{longitude}}" latitude="{{latitude}}" include-points="{{points}}" markers='{{markers}}'>

<cover-view class="map-tab-bar">

<cover-viewclass="map-tab-li {{item.id == status ? 'active' : ''}}" bindtap="getType" data-type="{{item.id}}" wx:key="aroundListId" wx:for="{{aroundList}}">{{item.name}}</cover-view>

</cover-view>

<cover-viewclass="map-tab-bar map-foot {{isShow ? '' : 'map-hide'}}">

<cover-viewclass="map-name">{{name}}</cover-view>

<cover-viewclass="map-address">{{address}}</cover-view>

</cover-view>

</map>

top: 0;

bottom: 0;

left: 0;

right: 0;

}

.map{

width: 100%;

height: 100%;

}

.map-tab-bar{

background-color: #fff;

}

.map-hide{display: none;}

.map-foot{

top: auto;

bottom: 0;

padding: 0 10px;

}

.map-name{

height: 80rpx;

line-height: 60rpx;

font-size: 25rpx;

overflow: hidden;

}

.map-tab-li{

display: inline-block;

width: 25%;

overflow: hidden;

height: 70rpx;

line-height: 70rpx;