微信小程序实现附近吃喝玩乐功能-基于百度地图服务搜索附近POI

利用百度地图API实现一个简单的小程序附近POI定位。

map.js
bmap-wx.min.js文件下载网址
下载
这里基本是基于官方demo，下载地址压缩包里也有几个demo可以参考学习。
图片资源也在压缩包里。

// 引用百度地图微信小程序JSAPI模块
var bmap = require('../../utils/bmap-wx.min.js');
var wxMarkerData = [];
Page({
    data: {
        markers: [],
        latitude: '',
        longitude: '',
        placeData: {},
        query:'酒店'
    },
    makertap: function (e) {
        var that = this;
        var id = e.markerId;
        that.showSearchInfo(wxMarkerData, id);
        that.changeMarkerColor(wxMarkerData, id);
    },
    button:function (e) {
        this.data.query = e.currentTarget.dataset['index'];
        console.log(this.data.query);
        this.onLoad();
    },
    onLoad: function () {
        var that = this;
        var query = this.data.query;
        // 新建百度地图对象
        var BMap = new bmap.BMapWX({
            ak: 'SHhILCwBcfqiCqwEL1MpqeRS5qwS5uoW'
        });
        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": query,
            fail: fail,
            success: success,
            // 此处需要在相应路径放置图片文件
            iconPath: '../../img/marker_red.png',
            // 此处需要在相应路径放置图片文件
            iconTapPath: '../../img/marker_red.png'
        });
    },
    showSearchInfo: function (data, i) {
        console.log(data)
        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
        });
    }
})

map.wxml
静态页面，利用data-index简单的传一个值，再从js里把这个值赋给“query”，从而实现查询条件变更。

<view class="map_container">
    <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
</view>
<button bindtap="button" type="default" plain="true" data-index="美食">美食</button>
<button bindtap="button" type="default" plain="true" data-index="酒店">酒店</button>
<button bindtap="button" type="default" plain="true" data-index="购物">购物</button>
<button bindtap="button" type="default" plain="true" data-index="生活服务">生活服务</button>
<view class="place_info">
    <text>{{placeData.title}}</text>
    <text>{{placeData.address}}</text>
    <text>{{placeData.telephone}}</text>
</view>

map.wxss
简单写个样式，能出效果就可以了。

.map_container{
    height: 450px;
    width: 100%;
}

.map {
    height: 100%;
    width: 100%;
}

.place_info {
    padding: 0 5px;
}

说一下这里踩的坑，如果你的小程序提示你百度地图的地址不在合法域名列表中）。

上线情况下：你需要在https://mp.weixin.qq.com/wxamp/wadevelopcode/的服务端域名里配置https://api.map.baidu.com;使他成为合法域名。
本地情况下：在本地情况下localhost不应该也不能配置在服务端域名上，那么你就需要开启这一项，跳过校验。

如果在电脑可以运行，手机地图却出现蓝屏的情况，有可能是因为手机端的调试基础库问题。把运行环境的调试基础库推送即可解决。