该查找并展示定位地点周边的POI信息,很快知道“我周围有什么”。默认返回生活服务、美食、酒店三种类型的POI。
检索返回的结果包含marker数组数据和完整数据两项。marker数组数据符合小程序marker规范,可以直接用于小程序map中;完整数据包含了百度POI检索接口返回的所有详尽的数据,方便开发者进行自定义开发。
在以下的代码中,首先引用百度地图微信小程序JavaScript API 模块,然后在页面的onLoad中声明BMapWX对象,最后调用BMapWX.search方法进行POI检索。
// 引用百度地图微信小程序JSAPI模块var bmap = require('../../libs/bmap-wx.js');var wxMarkerData = [];Page({data: {markers: [],latitude: '',longitude: '',placeData: {}},makertap: function(e) {var that = this;var id = e.markerId;that.showSearchInfo(wxMarkerData, id);that.changeMarkerColor(wxMarkerData, id);},onLoad: function() {var that = this;// 新建百度地图对象var BMap = new bmap.BMapWX({ak: '您的ak'});var fail = function(data) {console.log(data)};var success = function(data) {wxMarkerData = data.wxMarkerData;that.setData({markers: wxMarkerData});that.setData({latitude: wxMarkerData[0].latitude});that.setData({longitude: wxMarkerData[0].longitude});}// 发起POI检索请求BMap.search({"query": '酒店',fail: fail,success: success,// 此处需要在相应路径放置图片文件iconPath: '../../img/marker_red.png',// 此处需要在相应路径放置图片文件iconTapPath: '../../img/marker_red.png'});},showSearchInfo: function(data, i) {var that = this;that.setData({placeData: {title: '名称:' + data[i].title + '\n',address: '地址:' + data[i].address + '\n',telephone: '电话:' + data[i].telephone}});},changeMarkerColor: function(data, i) {var that = this;var markers = [];for (var j = 0; j < data.length; j++) {if (j == i) {// 此处需要在相应路径放置图片文件data[j].iconPath = "../../img/marker_yellow.png";} else {// 此处需要在相应路径放置图片文件data[j].iconPath = "../../img/marker_red.png";}markers[j](data[j]);}that.setData({markers: markers});}})
<view class="map_container"><map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map></view><view class="place_info"><text>{{placeData.title}}</text><text>{{placeData.address}}</text><text>{{placeData.telephone}}</text></view>
.map_container{height: 300px;width: 100%;}.map {height: 100%;width: 100%;}
本示例在页面加载完成后按照当前定位点,对周边的酒店进行了检索,并将检索的结果通过marker标识到地图中。点击marker可以查看当前POI点的详细信息。
上一篇
下一篇
本篇文章对您是否有帮助?