引用百度地图微信小程序JS API模块

目录

• ??

  

  做为一名软件专业没有思惟的，菜鸟中的圣斗士，将来的程序员， 最近再写一个微信小程序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，我是最胖的