利用百度地图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./wxamp/wadevelopcode/的服务端域名里配置https://api.;使他成为合法域名。
本地情况下：在本地情况下localhost不应该也不能配置在服务端域名上，那么你就需要开启这一项，跳过校验。
如果在电脑可以运行，手机地图却出现蓝屏的情况，有可能是因为手机端的调试基础库问题。把运行环境的调试基础库推送即可解决。
