使用步骤:
1.注册百度地图api账号,获取应用AK
2.环境配置:获取微信小程序appID密钥和百度AK
3.创建本地小程序项目
① 打开微信小程序开发者工具并使用微信确认登录。
② 点击 "+" 按钮,添加项目。
③ 点击 "添加项目" 按钮,项目创建完成。
注意:需勾选"在当前目录中创建quick start项目"。
4.下载百度地图微信小程序JavaScript API,解压后将bmap-xw.js文件引入到微信小程序目录libs文件中
5.打开快速创建的微信小程序 pages/index/index.js 文件,用下面的代码完全替换原代码
在以下的代码中,首先引用百度地图微信小程序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
});
}
})
6.为能够正常展示地图和检索结果,请打开 pages/index/index.wxml 文件,用下面的代码完全替换原代码
<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>
7.拷贝样式代码到 pages/index/index.wxss文件
.map_container{ height: 300px; width: 100%; } .map { height: 100%; width: 100%; }