微信小程序地图map组件及周边设施poi查询显示
前言：最近在做微信小程序，查阅了网上的一些资料自己做了改动。任务模块中用到了小程序的map组件，实现了定位显示及查询poi显示周边特定设置的功能，点击其中的定位位置，可以显示这个设施的名字和地址。
1.wxml页面
<view class="menu-item-api-list docList">
<map class="map" longitude="{{longitude}}" latitude="{{latitude}}" include-points="{{points}}"
markers='{{markers}}' bindmarkertap="makertap">
<cover-view class="map-tab-bar">
<cover-view class="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-view class="map-foot" wx:if="{{showmark}}">
<cover-view class="mapName">{{textData.name}}</cover-view>
<cover-view class="mapDesc">{{textData.desc}}</cover-view>
</cover-view>
</map>
</view>
ps:地图居中显示，上面有tab，可以选择切换查询对象。这里有个坑得提醒下，小程序中原生组件的层级最高，如何想在map上显示其他功能块，我个人解决的办法是使用cover-view,具体可查询小程序api文档。
2.js页面
PS：
（1）我使用了高德开放平台的小程序SDK，用于查询周边设施的poi,具体，下载地址：http://lbs.amap.com/api/wx/gettingstarted
（ 2 ）在高德平台申请得到key,在下面的程序中需要添加key（key没有时间限制，曾经向客服提交过工单咨询过），将下载下来的文件放置在个人的文件目录下，并在js中引入
//下面的aroundList中的id是周边设施对应的id具体可查询高德地图的id表
var amap = require('../../libs/amap-wx.js');
Page({
data: {
formIdArr: [],
showmark:false,
aroundList: [
{
name: '医院',
id: '090100'
},
{
name:'医生',
id: '090300'
}
],
markersData:[],
textData:{},
status: null,
latitude: null,
longitude: null,
markers: [],
points: [],
location: '',
name: '',
address: '',
},
onLoad: function () {
var _this = this;
_this.setData({
showmark: false,
}
);
//小程序获取当前位置api,下面的图片路径请自行按照个人文件路径添加
wx.getLocation({
type: 'gcj02',
success(data) {
if (data) {
_this.setData({
latitude: data.latitude,
longitude: data.longitude,
markers: [{
id: 0,
latitude: data.latitude,
longitude: data.longitude,
iconPath: '../../image/ic_position.png',
width: 32,
height: 32
}]
});
}
}
});
},
makertap: function (e) {
var id = e.markerId;
var that = this;
that.showMarkerInfo(that.data.markersData, id);
},
showMarkerInfo: function (data, i) {
var that = this;
that.setData({
showmark: true
}
);
that.setData({
textData: {
name: data[i].name,
desc: data[i].address
}
});
},
getType(e) {//获取选择的附近关键词，同时更新状态
this.setData({
status: e.currentTarget.dataset.type,
showmark: false
});
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: '../../image/ic_search.png',
iconPathSelected: '../../image/ic_search.png',
querykeywords: keywords,
querytypes: types,
location: _this.data.location,
success(data) {
if (data.markers) {
_this.setData({
markersData: data.markers
})
var markers = [], points = [];
for (var value of data.markers) {
if (value.id == 0) {
_this.setData({
name: value.name,
address: value.address,
})
}
markers.push({
id: value.id,
latitude: value.latitude,
longitude: value.longitude,
title: value.name,
iconPath: value.iconPath,
width: 25,
height: 25,
anchor: { x: .5, y: 1 },
});
points.push({
latitude: value.latitude,
longitude: value.longitude
})
}
_this.setData({
markers: markers,
points: points
})
}
}, fail: function (info) {
wx.showToast({ title: info })
}
})
},
})
3 wxss
.map{
width:100%;
height:890rpx;
}
.map-tab-bar{
position: absolute;
top: 0;
left: 0;
width: 100%;
height:70rpx;
z-index: 1000;
font-size: 0;
background-color: #fff;
border-radius:10rpx;
border-bottom: 2rpx solid #ddd;
}
.map-tab-li{
display: inline-block;
width: 50%;
height: 70rpx;
line-height: 70rpx;
text-align: center;
font-size: 30rpx;
color: #000000;
box-sizing: border-box;
}
.map-tab-li.active{
color: #6dc5a3 ;
border-bottom: 4rpx solid #6dc5a3 ;
}
.map-foot{
position: absolute;
bottom:0;
left: 0;
width: 100%;
height:80rpx;
background-color: #fff;
border-radius:10rpx;
padding-left: 20rpx;
}
.mapName{
font-size: 30rpx;
color: #000000;
}
.mapDesc{
font-size: 30rpx;
color: #000000;
}
end：希望对在开发小程序中使用到地图组件的同学又帮助。