小程序作业之通过百度API完成天气预报以及搜索周边美食

准备工作：先在百度地图开放平台注册一个账号，创建一个应用，类型选择微信小程序

1.天气预报

通过百度提供的方法获取数据：

// 引用百度地图微信小程序JSAPI模块 
var bmap = require('../../libs/bmap-wx.js'); 
Page({ 
    data: { 
        weatherData: '' 
    }, 
    onLoad: function() { 
        var that = this; 
        // 新建百度地图对象 
        var BMap = new bmap.BMapWX({ 
            ak: '您的ak' 
        }); 
        var fail = function(data) { 
            console.log(data) 
        }; 
        var success = function(data) { 
            var weatherData = data.currentWeather[0]; 
            weatherData = '城市：' + weatherData.currentCity + '\n' + 'PM2.5：' + weatherData.pm25 + '\n' +'日期：' + weatherData.date + '\n' + '温度：' + weatherData.temperature + '\n' +'天气：' + weatherData.weatherDesc + '\n' +'风力：' + weatherData.wind + '\n'; 
            that.setData({ 
                weatherData: weatherData 
            }); 
        } 
        // 发起weather请求 
        BMap.weather({ 
            fail: fail, 
            success: success 
        }); 
    } 
})

也可以通过wx.request方法发送请求获取数据

wx.request({
      url:'https://api.map.baidu.com/telematics/v3/weather?location='+city + "&output=json&ak=" + ak, //=江夏&output=json&ak=
      header: {
        'Content-Type':'application/json'
      },
      success:function(res){    
        //根据自己需要处理获取的数据
      }
    })

页面效果参考了 https://blog.csdn.net/qq_38194393/article/details/81296381

2.结合位置API实现搜索附近美食，并且点击后显示详细地址

基于百度POI检索的示例：http://lbs.baidu.com/index.php?title=wxjsapi/guide/getpoi

本示例在页面加载完成后按照当前定位点，对周边的酒店进行了检索，并将检索的结果通过marker标识到地图中。点击marker可以查看当前POI点的详细信息。

<!--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> 

/*wxss*/
.map_container{ 
    height: 300px; 
    width: 100%; 
} 

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

//js
// 引用百度地图微信小程序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 
        }); 
    } 
})

实现随着位置改变显示改变后位置附近美食：

1.将发起POI检索请求的函数封装起来

function searchStore(){
  // 发起POI检索请求 
    BMap.search({ 
        "query": '美食', 
        "location":mapcenter[0]+','+mapcenter[1],
        fail: function(data){
          console.log(data)
        }, 
        success:function(data){
          wxMarkerData = data.wxMarkerData;
          //标记数组最后加入中心点坐标
          wxMarkerData.push({
            iconPath:"../../images/centerP.png",
            id:999,
            latitude:mapcenter[0],
            longitude:mapcenter[1]
          })
          that.setData({
            markers:wxMarkerData
          })
        },
        // 此处需要在相应路径放置图片文件 
        iconPath: '../../images/marker_red.png', 
        // 此处需要在相应路径放置图片文件 
        iconTapPath: '../../images/marker_red.png' 
    }); 
}

2.添加一个视野变化函数bindregionchange，获取中心坐标，再调用封装起来的检索请求函数

regionChange:function(e){
      this.mapCtx.getCenterLocation({
        success:function(res){
          mapcenter = [res.latitude,res.longitude]
        }
      })
      searchStore();
    },

ps：changeMarkerColor函数处需要修改一下，因为最后添加的是中心坐标，所以markers最后一项的图片需要修改成中心坐标的图片，否则会显示成美食坐标，点击后因为没有placeData需要的数据而报错。