目录

• ??

  

  作为一名软件专业没有思维的，菜鸟中的圣斗士，未来的程序员， 最近再写一个微信小程序e-life，在这过程中，想要写一个周边的酒店、美食、服务、再分别点击他们的时候，可以在地图上标记处他们的位置，并且可以显示出该地方的具体位置、名称、电话

1.原理

前百度和高德周边查询api的实现机制基本一致，都是使用request接口请求远程https接口，然后返回参数中位置的某种类型的周边信息，最后再把数据动态绑定到页面。

2. js 引入模块

在项目根目录下新建一个路径，下载百度地图微信小程序JavaScriptAPI，解压后得到bmap-xw.js 文件，将其拷贝到新建的路径下，安装完成。

var bmap = require('../../libs/bmap-wx.js');

3. 获取地图

• 3.1 新建百度地图

  首先小程序获取当前位置api,下面的图片路径请自行按照个人文件路径添加，这也是我没有思维的地方。因为我不知道怎么引入地图在小程序里，并且对map组件没有了解，

wxMarkerData = data.wxMarkerData;
      that.setData({
        markers: wxMarkerData,
        fail: fail,
      });
      that.setData({
        latitude: wxMarkerData[0].latitude
      });
      that.setData({
        longitude: wxMarkerData[0].longitude
      });
    }
    that.setData({
      success: success
    });

• 3.2 获得信息

  让触发的位置改变颜色

makertap: function (e) {
    var that = this;
    var id = e.markerId;
    that.showSearchInfo(wxMarkerData, id);
    that.changeMarkerColor(wxMarkerData, id);
  },

• 3.3 setData渲染到页面里，并且显示详情信息 如具体位置，电话，名称

showSearchInfo: function (data, i) {
    var that = this;
    that.setData({
      placeData: {
        title: '名称：' + data[i].title + '\n',
        address: '地址：' + data[i].address + '\n',
        telephone: data[i].telephone == undefined ? '电话：暂无信息' : '电话：' + data[i].telephone
      }
    });
  },

4. 结语

最后结语给自己打打气，作为菜鸟，要努力写代码，改bug，我是最胖的