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

2020-11-27 来源：赴品旅游

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

声明

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

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

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

感谢：感谢Lrj_estranged指出问题！

效果图

实现方法

1. 地图采用微信小程序提供的map组件；

2. 周边的数据坐标点通过高德地图提供的API接口，获取定位位置的周边或者指定位置周边的数据。

WXML

<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>
</view>

WXSS

.map_container{
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}
.map{
 width: 100%;
 height: 100%;
}
.map-tab-bar{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 font-size: 0;
 background-color: #fff;
}
.map-hide{display: none;}
.map-foot{
 top: auto;
 bottom: 0;
 padding: 0 10px;
}
.map-name{
 height: 80rpx;
 line-height: 80rpx;
 font-size: 35rpx;
 overflow: hidden;
}
.map-address{
 height: 60rpx;
 line-height: 60rpx;
 font-size: 25rpx;
 overflow: hidden;
}
.map-tab-li{
 display: inline-block;
 width: 25%;
 overflow: hidden;
 height: 70rpx;
 line-height: 70rpx;
 text-align: center;
 font-size: 30rpx;
 color: #333;
}
.map-tab-li.active{color: #fff;background-color: lightgreen;border-radius: 5px;}

var app = getApp();
var amap = app.data.amap;
var key = app.data.key;
Page({
 data: {
 aroundList: [
 {
 name: '汽车服务',
 id: '010000'
 },
 {
 name: '汽车销售',
 id: '020000'
 },
 {
 name: '汽车维修',
 id: '030000'
 },
 {
 name: '摩托车',
 id: '040000'
 },
 {
 name: '餐饮',
 id: '050000'
 },
 {
 name: '购物',
 id: '060000'
 },
 {
 name: '生活',
 id: '070000'
 },
 {
 name: '体育休闲',
 id: '080000'
 },
 {
 name: '医疗保健',
 id: '090000'
 },
 {
 name: '住宿',
 id: '100000'
 },
 {
 name: '风景名胜',
 id: '110000'
 },
 {
 name: '商务住宅',
 id: '120000'
 }
 ],
 status:null,
 latitude: null,
 longitude: null,
 isShow: false,
 markers: [],
 points: [],
 location: '',
 name:'',
 address: ''
 },
 onLoad: function () {
 // 页面加载获取当前定位位置为地图的中心坐标
 var _this = this;
 wx.getLocation({
 success(data) {
 if (data) {
 _this.setData({
 latitude: data.latitude,
 longitude: data.longitude,
 markers:[{
 id:0,
 latitude: data.latitude,
 longitude: data.longitude,
 iconPath: '../../src/images/ding.png',
 width: 32,
 height: 32
 }]
 });
 }
 }
 });
 },
 getType(e) {//获取选择的附近关键词，同时更新状态
 this.setData({ status: e.currentTarget.dataset.type})
 this.getAround(e.currentTarget.dataset.keywords,e.currentTarget.dataset.type);
 },
 getAround(keywords,types) {//通过关键词获取附近的点，只取前十个，同时保证十个点在地图中显示
 var _this = this;
 var myAmap = new amap.AMapWX({ key: key });
 myAmap.getPoiAround({
 iconPath: '../../src/images/blue.png',
 iconPathSelected: '../../src/images/ding.png',
 querykeywords: keywords,
 querytypes: types,
 location: _this.data.location,
 success(data) {
 if (data.markers) {
 var markers = [], points = [];
 for (var value of data.markers) {
 if (value.id > 9) break;
 if(value.id == 0){
 _this.setData({
 name: value.name,
 address: value.address,
 isShow: true
 })
 }
 markers.push({
 id: value.id,
 latitude: value.latitude,
 longitude: value.longitude,
 title: value.name,
 iconPath: value.iconPath,
 width: 32,
 height: 32,
 anchor: { x: .5, y: 1 },
 label: {
 content: value.name,
 color: 'green',
 fontSize: 12,
 borderRadius: 5,
 bgColor: '#fff',
 padding: 3,
 x: 0,
 y: -50,
 textAlign: 'center'
 }
 });
 points.push({
 latitude: value.latitude,
 longitude: value.longitude
 })
 }
 _this.setData({
 markers: markers,
 points: points
 })
 }
 },
 fail: function (info) {
 wx.showToast({title: info})
 }
 })
 }
});

总结

1. 由于是移动端，所以人为限制只显示了9条周边数据，防止重叠部分太多。

2. 添加指定位置的周边的方法—-添加一个input，将给的关键字进行搜索，然后返回坐标，改变地图中心坐标。

3. 改变中心坐标还有采用微信小程序自己的API（wx.chooseLocation），改变地图中心坐标。参考：微信小程序实现map路线规划

4. 高德地图提供API和微信小程序提供API的优劣：①、目前高德提供的API返回数据很快，最少目前比微信小程序自己的快很多；②、缺点也很明显就是由于是外部提供的，所以需要进行对应配置，麻烦；③、微信小程序提供的API优势就是属于本身，不用额外配置，如果以后优化了，更好。

实例：

用高德地图提供的 getInputtips 接口，搜索关键字和城市，返回的坐标，然后改变地图中心坐标。

// 页面加载以输入地址为地图的中心坐标
// 假如输入的是：成都 欧尚庭院
myAmap.getInputtips({
 keywords: '欧尚庭院',
 city: '成都',
 success(res) {
 var tip = res.tips[0];
 var lo = tip.location.split(',')[0];
 var la = tip.location.split(',')[1];
 _this.setData({
 latitude: la,
 longitude: lo,
 location: tip.location,
 markers: [{
 id: 0,
 latitude: la,
 longitude: lo,
 iconPath: '../../src/images/ding.png',
 width: 32,
 height: 32
 }]
 })
 }
})

希望本文所述对大家微信小程序开发有所帮助。

显示全文

全部栏目

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