作者:花罰,來自原文地址原理當前百度和高德周邊查詢api的實現(xiàn)機制基本一致,都是使用request接口請求遠程https接口,然后返回參數(shù)中位置的某種類型的周邊信息,最后再把數(shù)據(jù)動態(tài)綁定到頁面。本文使用百度小程序接 ...
當前百度和高德周邊查詢api的實現(xiàn)機制基本一致,都是使用request接口請求遠程https接口,然后返回參數(shù)中位置的某種類型的周邊信息,最后再把數(shù)據(jù)動態(tài)綁定到頁面。本文使用百度小程序接口進行實現(xiàn)。
微信小程序創(chuàng)建地圖容器相對來說比較簡單,只需要一個map組件即可,下面代碼將完成地圖容器的創(chuàng)建:
- wxml代碼
map組件簡介
map組件默認使用騰訊地圖,只要在wxml中書寫
上面的代碼已經(jīng)可以正常的創(chuàng)建地圖容器了,但是所創(chuàng)建的地圖大小不夠,所以我們需要給map組件配上style屬性,style屬性是wxml中幾乎所有組件均支持的屬性,主要用于給主鍵配置顯示效果。以下地圖全屏代碼同時適用于wxml的其他組件: - 在map組件上加上style
wx.getSystemInfo
進行獲取系統(tǒng)的高度,然后再動態(tài)綁定到map組件上。js代碼如下:var bmap = require('../../utils/bmap-wx.js')
引入api注:在開始使用該api之前,我們還需要去百度地圖上獲取一個微信小程序專用的key,在獲取這個key的時候需要輸入目標小程序的appid。
BMap.search
接口是用于獲取周邊信息的接口,官方描述為:查找并展示定位地點周邊的POI信息,很快知道“我周圍有什么”。默認返回生活服務、美食、酒店三種類型的POI。
首先,我們來看一個BMap.search
的使用案例:
從上面代碼中可以看出我們?yōu)榱耸褂迷摻涌?,在頁面?shù)據(jù)中加入了三個數(shù)據(jù):latitude、longitude和markers,分別用于保存當前poi位置和周邊信息的標記。還有看到我們在在page外申明了兩個變量,bmap和wxMarkerData, 分別保存當前頁面的api入口,poi接口返回數(shù)據(jù)。由于頁面增加數(shù)據(jù)了,所以對應的頁面也需要做出相應的變化,需要對map組件進行簡單的修改:
同時添加了兩個簡單的wxss,這個wxss是給地圖腳下增加的一個簡單的導航樣式
以上就完成了一個簡單的地圖周邊組件,優(yōu)化一下顯示效果就差不多可以用了。當前還有一個問題就是百度api的bug問題,該bug如果不進行修復,那么將一直只能查詢當前地址的周邊信息,另外我查看了高德地圖的poi周邊接口,該接口就直接不提供指定位置的周邊信息查詢。