小程序进阶（一）

[gaowei1012]

今天我们说到用百度提供的API搭建我们的小程序，好了，下来让我们进入正题：
首先我玩进入百度开放平台，获取对应账号和秘钥，获取方法在百度开放平台上有详细介绍http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key 这里我们就跳过。
在获取到账号和秘钥之后我们接下来就是配置环境了， 在我们项目下面新建一个libs目录，将在下载好的JavaScriptApi 里面的 bmap-wx.min.js 导入进来，环境就配置到这里。接下来我们就可以尽情搞技术了。
首先在我们的项目index文件夹中index.js中修改以下代码：(记住修改你的ak值)

// 引用百度地图微信小程序JSAPI模块 
2
var bmap = require('../../libs/bmap-wx.js'); 
3
var wxMarkerData = []; 
4
Page({ 
5
    data: { 
6
        markers: [], 
7
        latitude: '', 
8
        longitude: '', 
9
        placeData: {} 
10
    }, 
11
    makertap: function(e) { 
12
        var that = this; 
13
        var id = e.markerId; 
14
        that.showSearchInfo(wxMarkerData, id); 
15
        that.changeMarkerColor(wxMarkerData, id); 
16
    }, 
17
    onLoad: function() { 
18
        var that = this; 
19
        // 新建百度地图对象 
20
        var BMap = new bmap.BMapWX({ 
21
            ak: '您的ak' 
22
        }); 
23
        var fail = function(data) { 
24
            console.log(data) 
25
        }; 
26
        var success = function(data) { 
27
            wxMarkerData = data.wxMarkerData; 
28
            that.setData({ 
29
                markers: wxMarkerData 
30
            }); 
31
            that.setData({ 
32
                latitude: wxMarkerData[0].latitude 
33
            }); 
34
            that.setData({ 
35
                longitude: wxMarkerData[0].longitude 
36
            }); 
37
        } 
38
       // 发起POI检索请求 
39
        BMap.search({ 
40
            "query": '酒店', 
41
            fail: fail, 
42
            success: success, 
43
            // 此处需要在相应路径放置图片文件 
44
            iconPath: '../../img/marker_red.png', 
45
            // 此处需要在相应路径放置图片文件 
46
            iconTapPath: '../../img/marker_red.png' 
47
        }); 
48
    }, 
49
    showSearchInfo: function(data, i) { 
50
        var that = this; 
51
        that.setData({ 
52
            placeData: { 
53
                title: '名称：' + data[i].title + '\n', 
54
                address: '地址：' + data[i].address + '\n', 
55
                telephone: '电话：' + data[i].telephone 
56
            } 
57
        }); 
58
    }, 
59
    changeMarkerColor: function(data, i) { 
60
        var that = this; 
61
        var markers = []; 
62
        for (var j = 0; j < data.length; j++) { 
63
            if (j == i) { 
64
                // 此处需要在相应路径放置图片文件 
65
                data[j].iconPath = "../../img/marker_yellow.png"; 
66
            } else { 
67
                // 此处需要在相应路径放置图片文件 
68
                data[j].iconPath = "../../img/marker_red.png"; 
69
            } 
70
            markers[j](data[j]); 
71
        } 
72
        that.setData({ 
73
            markers: markers 
74
        }); 
75
    } 
76
})// 引用百度地图微信小程序JSAPI模块 
77
var bmap = require('../../libs/bmap-wx.js'); 
78
Page({ 
79
    data: { 
80
        sugData: '' 
81
    }, 
82
    // 绑定input输入 
83
    bindKeyInput: function(e) { 
84
        var that = this; 
85
        // 新建百度地图对象 
86
        var BMap = new bmap.BMapWX({ 
87
            ak: '您的ak' 
88
        }); 
89
        var fail = function(data) { 
90
            console.log(data) 
91
        }; 
92
        var success = function(data) { 
93
            var sugData = ''; 
94
            for(var i = 0; i < data.result.length; i++) { 
95
                sugData = sugData + data.result[i].name + '\n'; 
96
            } 
97
            that.setData({ 
98
                sugData: sugData 
99
            }); 
100
        } 
101
       // 发起suggestion检索请求 
102
        BMap.suggestion({ 
103
            query: e.detail.value, 
104
            region: '北京', 
105
            city_limit: true, 
106
            fail: fail, 
107
            success: success 
108
        }); 
109
    } 
110
})

 接着修改index文件夹下index.wxml的内容:

<view class="map_container"> 
2
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map> 
3
</view> 
4
<view class="place_info"> 
5
  <text>{{placeData.title}}</text> 
6
  <text>{{placeData.address}}</text> 
7
  <text>{{placeData.telephone}}</text> 
8
</view>

最后我们修改index文件夹下index.wxss文件

完成以上步骤后我们就可以看到效果了