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

本文实例讲述了微信小程序使用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;}

JS

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功能示例 的全部内容, 来源链接: utcz.com/z/356052.html

回到顶部