小程序模板網(wǎng)

微信小程序之地圖周邊（使用百度地圖接口）

發(fā)布時間：2017-11-28 17:08 所屬欄目：小程序開發(fā)教程

作者：花罰，來自原文地址原理當前百度和高德周邊查詢api的實現(xiàn)機制基本一致，都是使用request接口請求遠程https接口，然后返回參數(shù)中位置的某種類型的周邊信息，最后再把數(shù)據(jù)動態(tài)綁定到頁面。本文使用百度小程序接 ...

 
 
 

作者：花罰，來自原文地址 

原理

當前百度和高德周邊查詢api的實現(xiàn)機制基本一致，都是使用request接口請求遠程https接口，然后返回參數(shù)中位置的某種類型的周邊信息，最后再把數(shù)據(jù)動態(tài)綁定到頁面。本文使用百度小程序接口進行實現(xiàn)。

步驟

1. 創(chuàng)建地圖容器

微信小程序創(chuàng)建地圖容器相對來說比較簡單，只需要一個map組件即可，下面代碼將完成地圖容器的創(chuàng)建： 
- wxml代碼

<!-- index.wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14"></map>
  • 1
  • 2
  • 1
  • 2

  • map組件簡介

    map組件默認使用騰訊地圖，只要在wxml中書寫標簽即可展示一個簡易的地圖容器，但是這個地圖太過于簡單，也沒有什么可操作性，因此該標簽還提供了一些特殊屬性方便用戶可以任意的操作和位置該組件，下面介紹幾個常用的屬性。

    • longitude & latitude 這兩個屬性一般都是成對出現(xiàn)，用于初始化地圖中心位置
    • scale 該屬性表示地圖的縮放級別，數(shù)字越大比例尺越小。根據(jù)文檔上說默認值為：16

2. 地圖容器全屏

上面的代碼已經(jīng)可以正常的創(chuàng)建地圖容器了，但是所創(chuàng)建的地圖大小不夠，所以我們需要給map組件配上style屬性，style屬性是wxml中幾乎所有組件均支持的屬性，主要用于給主鍵配置顯示效果。以下地圖全屏代碼同時適用于wxml的其他組件：  - 在map組件上加上style

<!-- index.wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14"
 style="width: 100%; height: {{height}}px;"></map>
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 在js中動態(tài)綁定style的高  對于組件的寬度全屏我們可以使用100%進行確定，但是高度全屏100%卻不能起到任何效果，對此可以使用小程序的一個接口wx.getSystemInfo進行獲取系統(tǒng)的高度，然后再動態(tài)綁定到map組件上。js代碼如下：
//index.js
var app = getApp()
Page({
    data: {
        height: 'auto'
    },
    onLoad: function () {
        //保證wx.getSystemInfo的回調(diào)函數(shù)中能夠使用this
        var that = this

        //調(diào)用wx.getSystemInfo接口，然后動態(tài)綁定組件高度
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    height: res.windowHeight
                })
            }
        })

    }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

3. 引入百度地圖小程序api

  • 下載bmap-wx.js
  • 解壓后將bmap-wx.js放入小程序工程里面，我這里是創(chuàng)建一個叫utils的文件夾用于保存這些第三方的工具。
  • 在js中使用var bmap = require('../../utils/bmap-wx.js')引入api

注：在開始使用該api之前，我們還需要去百度地圖上獲取一個微信小程序專用的key，在獲取這個key的時候需要輸入目標小程序的appid。

4. 使用api獲取周邊信息

BMap.search接口是用于獲取周邊信息的接口，官方描述為：查找并展示定位地點周邊的POI信息，很快知道“我周圍有什么”。默認返回生活服務、美食、酒店三種類型的POI。

首先，我們來看一個BMap.search的使用案例:

//index.js
var app = getApp()
//引入百度地圖api
var bmap = require('../../utils/bmap-wx.js')
//用于保存BMap.search接口返回的數(shù)據(jù)
var wxMarkerData = []
Page({
    data: {
        height: 'auto',
        markers: [], 
        latitude: '', 
        longitude: ''
    },
    onLoad: function () {
        //保證wx.getSystemInfo的回調(diào)函數(shù)中能夠使用this
        var that = this

        //構造百度地圖api實例
        BMap = new bmap.BMapWX({ 
            ak: '***************' 
        })

        //調(diào)用wx.getSystemInfo接口，然后動態(tài)綁定組件高度
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    height: res.windowHeight
                })
            }
        })
    },
    //查詢當前位置的poi信息
    //官方文檔上說可以查詢指定位置的周邊信息
    //然而當前源碼中卻存在一個bug導致不能查詢指定位置的周邊信息
    search:function(e){

        var that = this

        //查詢失敗，直接打印log
        var fail = function(data) { 
            console.log(data) 
        }

        //查詢成功后將結果數(shù)據(jù)動態(tài)綁定到頁面上
        var success = function(data) { 
            wxMarkerData = data.wxMarkerData; 
            that.setData({ 
                markers: wxMarkerData 
            })
            that.setData({ 
                latitude: wxMarkerData[0].latitude 
            })
            that.setData({ 
                longitude: wxMarkerData[0].longitude 
            })
        }

        //使用百度api查詢周邊信息
        //其中使用到了dataset屬性
        BMap.search({
            query: e.target.dataset.type, 
            success: success,
            fail: fail 
        })
    }

})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67

從上面代碼中可以看出我們?yōu)榱耸褂迷摻涌?，在頁面?shù)據(jù)中加入了三個數(shù)據(jù)：latitude、longitude和markers，分別用于保存當前poi位置和周邊信息的標記。還有看到我們在在page外申明了兩個變量，bmap和wxMarkerData， 分別保存當前頁面的api入口，poi接口返回數(shù)據(jù)。由于頁面增加數(shù)據(jù)了，所以對應的頁面也需要做出相應的變化，需要對map組件進行簡單的修改：

<!--index.wxml-->
<view style="width: 100%; height: {{height}}px;">
    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" 
    markers="{{markers}}"  style="width: 100%; height: {{height-30}}px;"></map>
    <view class="nav">
        <button bindtap="search" data-type='酒店' class="nav-but">酒店</button>
        <button bindtap="search" data-type='美食' class="nav-but">美食</button>
        <button bindtap="search" data-type='書店' class="nav-but">書店</button>
        <button bindtap="search" data-type='商場' class="nav-but">商場</button>
    </view>
</view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

同時添加了兩個簡單的wxss，這個wxss是給地圖腳下增加的一個簡單的導航樣式

/**index.wxss**/
.nav{
  position: fixed;
  z-index: 10000;
  bottom: 0px;
  width: 100%;
  height: 30px;
}
.nav-but{
  border: cadetblue 1px solid;
  border-radius: 0px;
  width: 25%;
  text-align: center;  
  line-height: 30px;
  display: inline-flex;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

以上就完成了一個簡單的地圖周邊組件，優(yōu)化一下顯示效果就差不多可以用了。當前還有一個問題就是百度api的bug問題，該bug如果不進行修復，那么將一直只能查詢當前地址的周邊信息，另外我查看了高德地圖的poi周邊接口，該接口就直接不提供指定位置的周邊信息查詢。



易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://u-renovate.com/wxmini/doc/course/17971.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢
QQ在線咨詢