沒有它，我們寸步難行-LBS的淵源與實踐

BS簡史

LBS是互聯(lián)網(wǎng)的基礎(chǔ)設(shè)施，幾乎每個互聯(lián)網(wǎng)巨頭都投入大量的資源來開發(fā)它，我們的生活才得以這么便利。或者說，正是它如此常用，就像水電空氣，我們對它們幾乎毫無感知，卻又處處使用著它。很多時候，我們新裝一個APP，就可能被索要此權(quán)限，如果不給它，許多事就無法進行下去。說來說去，LBS是什么呢？乍一想，就是地圖。但這只是可視化的一部分，它的另一半是定位服務(wù)。因此LBS的英文全稱是為Location Based Services，基于定位的服務(wù)。

LBS的出現(xiàn)緣起于美國一個綁架事件，1993年11月美國一個叫做詹尼弗·庫恩的女孩遭綁架之后被殺害，在這個過程當(dāng)中，庫恩用手機撥打了911電話，但是911呼救中心無法通過手機信號確定她的位置。由于這個事件，導(dǎo)致美國的FCC(美國通信委員會)在1996年推出了一個行政性命令E911，要求強制性構(gòu)建一個公眾安全網(wǎng)絡(luò)，即無論在任何時間和地點，都能通過無線信號追蹤到用戶的位置，位置精確到50-300米。

此外，2001年的911事件也讓美國的公眾認識到位置服務(wù)的重要性，因此，在為了實現(xiàn)E911目標的同時，基于位置服務(wù)的業(yè)務(wù)也逐漸開展起來。從某種意義上來說，是E911促使移動運營商投入大量的資金和力量來研究位置服務(wù)，從而催生了LBS市場。

PC時代，一般人很少會受益于此服務(wù)的。大家對它的感受就是百度地圖，谷歌地圖，高德地圖，騰訊地圖，需要時就直接打開網(wǎng)址查一下，了解一下這個城市有多少個縣城，有什么景點，外部網(wǎng)站也很少引用它的API。因此在PC時代，LBS等同于地圖服務(wù)。

移動端時代，由于手機內(nèi)置了更多硬件能獲取更多地理信息，因此更加準確實時，而不像PC時代那樣通過IP地址進行反解。手機系統(tǒng)對這些硬件進行匯總，直接給出可用的地理名稱（省市縣與街道名稱），經(jīng)緯度，我們才能在上面更具體化的服務(wù)，于是誕生了摩拜單車，街旁網(wǎng)，大眾點評，美團外賣，切客這些APP及微信運動，共享實時位置，搖一搖這些內(nèi)置在微信上的好用功能。

換言之，PC時代，LBS只限于顯示某一個區(qū)域的顯示，上面加點廣告，告訴你上面有什么超市酒店。而在移動端時代，每個人都共享（或直接說暴露了）自己的位置信息及其他可販賣的信息（照片，愛好，自己酒店能提供的服務(wù)），被APP有效地利用起來，變成共享單車，交友逛街，外賣快遞這些強交互服務(wù)。

底層技術(shù)一覽

說到地理信息，人家常常聯(lián)想到GPS。GPS只是LBS的獲取位置信息的一種手段，剛才我們通過H5 API獲取經(jīng)緯度，可能就是多種手段之一?？偟膩碚f，主要以下幾種：GPS，基站，WIFI與IP。

GPS定位

GPS早些年是專門指代美國的衛(wèi)星定位系統(tǒng)，從20世紀70年代開始研制，歷時20年，耗資200億美元，于1994年全面建成。幾乎所有的手機都擁有GPS接收器，就可以『免費』使用它的低精度的民間定位服務(wù)。為了防止打仗時受制于人，歐盟，俄羅斯與我國也發(fā)射衛(wèi)星組裝自己的GPS服務(wù)，分別叫伽利略（Galileo），格洛納斯（GLONASS）與北斗（BDS）。最近，美國商業(yè)奇才馬斯克，也通過他的火箭成功發(fā)射兩波低軌衛(wèi)星，組建星鏈系統(tǒng)（Starlink），以后可能成為最大的衛(wèi)星網(wǎng)絡(luò)提供商，也能輕松為全球提供定義服用。

一般來說，國內(nèi)的手機都能同時接收這四個系統(tǒng)的服務(wù)。

說一下，GPS的技術(shù)原理。已知A、B、C三個點的坐標，以及該三點至D點的距離（分別是d0，d1，d2），求D點的坐標。我們可以通過以下三元二次方程組求解出唯一解（式1）。

GPS的原理就是基于上面公式。GPS在太空擁有24顆衛(wèi)星，衛(wèi)星分布在六個中距離近圓形軌道面上（每軌道面四顆），軌道傾角為55度。衛(wèi)星的分布使得在全球的任何地方，任何時間都可觀測到四顆以上的衛(wèi)星。

我們手機上的接收器不斷接收每個衛(wèi)星Si接收消息Mi，消息Mi不僅包含著衛(wèi)星Si的空間坐標，還包括衛(wèi)星發(fā)送消息的時間Ti。接收機在接收Mi后就可根據(jù)本地接收機的時間與衛(wèi)星發(fā)送消息時間之差來計算距離di：di=c*T；其中c是光速，T是時間差。然而，由于各種原因，包括大氣、建筑物，時鐘誤差等等因素，光速c以及時間差T是具有誤差的，di的結(jié)果很不準確，因此在計算時候需要加個誤差項進行修正，并且假設(shè)各個衛(wèi)星的誤差項一樣（式2）。

除了空間位置三個參數(shù)，現(xiàn)在又多出了誤差項，共有4個參數(shù)需要求解，至少需要4個衛(wèi)星才能解算（式3）。

GPS的缺點也顯然易見，它容易受干擾，比如存在與GPS相同的頻率的無線電信號（1500mhz 左右）,或者在室內(nèi)，地下室，由于墻壁使用了鐵、陶瓷、碳纖維這樣的大量吸波材料。

基站定位

基站定位的原理和雷達差不多。雷達定位的過程如下，通過發(fā)射雷達波，碰到物體返回，然后根據(jù)時間與波的速度推算物體的位置。同理，基站就是相當(dāng)一個雷達，不斷往外輻射。我們的手機總是在多個基站的信號覆蓋之下。手機會對不同基站的下行導(dǎo)頻信號進行“測量”，得到各個基站的信號TOA（到達時刻）或TDOA（到達時間差）。根據(jù)這個測量結(jié)果，結(jié)合基站的坐標（信號里自帶），就能夠計算出手機的坐標值。

然后根據(jù)上面的三點定位公式就能計算出來。

但它與GPS一樣，都有一個明顯的缺點，無法穿透建筑物，不能實現(xiàn)室內(nèi)定位。隨著室內(nèi)定位的業(yè)務(wù)場景越來越多，如地下車庫導(dǎo)航、商場尋找店鋪和商品，甚至兒童走失，都對室內(nèi)定位有迫切需求。因此又誕生了WiFi，藍牙，UWB等技術(shù)。

WiFi藍牙定位

不知大家有沒有人用過美團的摩拜單車與滴滴的青桔單車，它們總是讓你打開藍牙。WiFi與藍牙的定拉技術(shù)相似，無非是信號編碼與頻率的不同。我們以WiFi進行說明。

當(dāng)我們手機打開WiFi后，我們的手機就變成一個WikFi熱點（AP）,向外接收其他AP（可以是其他手機，也可能是無線路由器）的信號，也發(fā)射自己的信號。在城市，WiFi熱點是越來越多，每個點總是能接5~20個的AP信號。

AP都有一個全球唯一的MAC地址,并且一般來說無線AP在一段時間內(nèi)是不會移動。手機在開啟Wi-Fi的情況下,無論是否加密,是否已連接，甚至信號強度不足以顯示在無線信號列表中,都可以獲取到AP廣播出來的MAC地址。

手機將這些收集到的信號發(fā)送給定位引擎，通過樸素貝葉斯算法計算自己的位置。由于此公式超出常人的理解水平，我就不展開講解，感興趣的人可以網(wǎng)上檢索《基于樸素貝葉斯的定位算法》一文自行學(xué)習(xí)：https://blog.csdn.net/weixin_33928137/article/details/90708754

總的來說，藍牙從精度與可靠性比WIFI高多了。

IP定位

IP定位技術(shù)通過目標主機的IP地址定位其實際物理地址，被廣泛應(yīng)用于定向廣告、在線安全監(jiān)測、網(wǎng)絡(luò)攻擊溯源等位置相關(guān)服務(wù)。

總的來說，這是一種不怎么可靠的定位技術(shù)。因為IP地址資源很寶貴，大部分用戶都是通過動態(tài)IP地址上網(wǎng)的。所謂動態(tài)就是指，當(dāng)你每一次上網(wǎng)時，電信會隨機給你分配一個IP地址，靜態(tài)就是每次上網(wǎng)都用一個地址。一般來說，普通寬帶是動態(tài)ip，也有直接光纖接入的靜態(tài)ip。

假定我們的IP就是靜態(tài)的，如何找到你的位置呢？我們知道，IP地址本質(zhì)上是一個32位的無符號整型(unsigned int)，范圍從0 ~ 2^32 ，總計約43億個IP地址。一般以192.168.0.1這樣的形式表示出來。

IP地址的劃分，有RIR機構(gòu)來進行統(tǒng)籌管理。負責(zé)亞洲地區(qū)IP地址分配的，就是APNIC，總部位于澳大利亞墨爾本。各大RIR機構(gòu)都提供了關(guān)于IP地址劃分的登記信息，即whois記錄?？梢栽诟鞔驲IR機構(gòu)提供的whois查詢頁面上查看，或者使用whois命令查詢：

IP的whois信息包含了申請使用該IP的運營商信息，并且在網(wǎng)段描述信息中，會包含國籍和省份信息。但是，我們還需要精確到每個街道，這就需要通過各種手段來完善這個IPto地理的數(shù)據(jù)庫了。例如，我們報裝寬帶時，提交用戶的地理位置；通過爬蟲，挖掘網(wǎng)站上的電話，地址，傳真等信息定位地理位置；基于網(wǎng)絡(luò)往返時間得到近似結(jié)果，該方法通過測量待定位的IP到各個已知參考點的往返時延，把往反時延算成地理距離從而定位主機。

因此IP定位技術(shù)后面需要一個龐大的數(shù)據(jù)庫，想準確還需要結(jié)合其他技術(shù)來推斷你的位置。比如，百度就有高精度IP定位API，因為我們時常使用它的服務(wù)，如百度搜索，百度地圖，百度網(wǎng)盤，它就在背后偷偷收集我們的數(shù)據(jù)，建立每個的用戶畫像。我想，比百度的線下服務(wù)更豐富的阿里，其對我們的了解，比我們自己對自己還準確。

百度的API取地理信息

function getXYbyIP { 
var url="https://api.map.baidu.com/location/ip?ak=HQi0eHpVOLlRuIFlsTZNGlYvqLO56un3&coor=bd09ll";//百度
$.ajax({
url:url,
type: 'POST',
dataType: 'JSONP',
async: false,
cache: true, //是否緩存 可以為false
success: function (data) {
alert(JSON.stringify(data));
},
error: function (data) {
// alert(JSON.stringify(data));
}
});
}

或者直接將地址貼到瀏覽器上：

微信小程序與LBS

綜上所述，構(gòu)建LBS的基石需要龐大的資金投入，你需要發(fā)射衛(wèi)星，布置大量的光纖，建基站（基站的密度是5G > 4G > 3G > 2G），建立IP數(shù)據(jù)庫并與地理信息與商業(yè)信息關(guān)聯(lián)起來，這需要不同梯度的公司來承擔(dān)這些工作與費用。

國內(nèi)的互聯(lián)網(wǎng)公司一般做最后一步工作，為用戶提供第三方數(shù)據(jù)。百度，騰訊，高德這些最早做地圖的公司，可以提供地圖顯示，IP信息，街道與商店地址等全方位的數(shù)據(jù)。而小眾領(lǐng)域，比如樓層的內(nèi)部地圖，艾滋病人數(shù)據(jù)，則有上千家公司來提供。

在早期PC時代，是很少公司有可能結(jié)合LBS為用戶提供本地服務(wù)，在移動端時代，隨著內(nèi)卷化越來越嚴重，LBS再度被人提起。比如說，搖一搖找附近的人，共享單車，訂餐，能結(jié)合LBS進行服務(wù)，能讓你的APP脫穎而出。

目前，對用戶做得最友好的是騰訊，它從服務(wù)API，基礎(chǔ)地圖服務(wù)，插件，行業(yè)方案等多個層次服務(wù)不同場景需求的開發(fā)者。從渠道方面講，微信小程序則又是當(dāng)中最受歡迎的分銷渠道，騰訊位置服務(wù)全面擁抱小程序生態(tài)，助力小程序插上地圖的“翅膀”！

相反，微信小程序的大多數(shù)開發(fā)者的技能則非常弱，他們很可能找不到這些對口的小公司，也很可能無法對原始的第三方數(shù)據(jù)進行加工（因為涉及到專業(yè)的術(shù)語）。因此微信小程序根據(jù)接口的復(fù)雜程序分為三個梯度：功能單一的API ，制定性很強的標簽式組件，與完成度非常高功能豐富的微信插件。

API羅列如下：

獲取地址信息的API（包括監(jiān)聽變動，中止監(jiān)聽）

wx.stopLocationUpdate 
wx.startLocationUpdateBackground
wx.startLocationUpdate
wx.openLocation
wx.onLocationChange
wx.offLocationChange
wx.getLocation
wx.chooseLocation

創(chuàng)建地圖實例的API及地圖實例的相關(guān)操作

wx.createMapContext 
MapContext.getCenterLocation
MapContext.getRegion
MapContext.getRotate
MapContext.getScale
MapContext.getSkew
MapContext.includePoints
MapContext.moveToLocation
MapContext.translateMarker

獲取用戶前進方向的API，包括羅盤與陀螺儀

wx.stopCompass 
wx.startCompass
wx.onCompassChange
wx.offCompassChange
wx.stopGyroscope
wx.startGyroscope
wx.onGyroscopeChange
wx.offGyroscopeChange

標簽式組件，一個

<map>

微信小程序插件，有如下三個：

路線規(guī)劃：根據(jù)起點、終點，智能規(guī)劃最佳出行路線，并支持多種出行方式。
地鐵圖：支持全國所有城市地鐵線路靜態(tài)展示、信息查詢、線路檢索及規(guī)劃等功能。
地圖選點：快速、準確地選擇并確認自己的當(dāng)前位置，并將相關(guān)位置信息回傳給開發(fā)者。

詳見這里：

https://lbs.qq.com/miniprogram_plugin/index.html

開發(fā)實踐

事實上，從另一個角度來看，這些API又是根據(jù)人的情況進行劃分的，分別為素人開發(fā)者，高手開發(fā)者與土豪開發(fā)者。

素人開發(fā)者基本上使用wx.openLocation，wx.getLocation與wx.chooseLocation這三個API就可以調(diào)用地圖組件，實現(xiàn)獲取自身位置，獲取某個地點的經(jīng)緯度與在地圖上顯示出來的需求。

我們打開微信開發(fā)者工具，建立一個小程序吧。

然后我們在index.wxml中添加一個按鈕。

 <view>
<button bindtap="getPosition">打開地圖選擇地址</button>
</view>

上面要綁定一個事件getPosition，它需要加在index.js中。getPosition很簡單，就是獲取用戶當(dāng)前位置。

getPosition: function  {
wx.getLocation({
type: 'gcj02',
success: function (res) {
var latitude=res.latitude //緯度
var longitude=res.longitude //經(jīng)度
var speed=res.speed //速度 ,-1表示不動，可能正躺在床上寫文章
var accuracy=res.accuracy//位置的精確度
var altitude=res.altitude //高度，單位 m
var verticalAccuracy=res.verticalAccuracy//垂直精度
console.log(res)
}
})
},

然后點開按鈕時，發(fā)現(xiàn)需要在app.json加點東西。

{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"permission": {
"scope.userLocation": {
"desc": "放心!!!你的位置信息只會用于當(dāng)前小程序"
}
},
"sitemapLocation": "sitemap.json"
}

然后我們點擊按鈕會發(fā)現(xiàn)地址打出來了。

這時我們就需要用wx.openLocation(OBJECT)打開地圖來查看具體的位置，這有點像webview，一下子將頁面蓋住。

wx.openLocation({
latitude: res.latitude,
longitude: res.longitude,
scale: 18, //最大也只能這樣
complete: function {
console.log('complete:', arguments);
}
});

如果我們要選擇一個地點，則需要用到wx.chooseLocation(OBJECT)*。我們在視圖上添加另一個按鈕與占位符。

<view>
<button bindtap="choosePosition">選擇位置</button>
<view>你選擇的地點為：{{address}}</view>
</view>

index.js里面需要在data中添加address屬性，然后再加上一個choosePosition方法

choosePosition: function  {
var that=this
wx.chooseLocation({
success: function (res) {
// success
console.log(res, "location")
that.setData({
address: res.address
})
}
})
},

效果如下：

回顧一下，使用這三個 API 調(diào)出的地圖的精度都是很有限的。我們在使用共享單車時，什么小藍單車、美團單車，能精確到十幾米，而現(xiàn)在這地圖可能是300多米。難道是與我們設(shè)置wx.getLocation的type參數(shù)為gcj02有關(guān)嗎？gcj02是一種地圖坐標系標準，目前國內(nèi)主要由以下三種坐標系主導(dǎo)著：

地球坐標 (WGS84)
國際標準，從 GPS 設(shè)備中取出的數(shù)據(jù)的坐標系。
國際地圖提供商使用的坐標系。
火星坐標 (GCJ-02)也叫國測局坐標系
中國標準，從國行移動設(shè)備中定位獲取的坐標數(shù)據(jù)使用這個坐標系。
國家規(guī)定：國內(nèi)出版的各種地圖系統(tǒng)（包括電子形式），必須至少采用GCJ-02對地理位置進行首次加密。
百度坐標 (BD-09)
百度標準，百度 SDK，百度地圖，Geocoding 使用。

撇開百度坐標，我們看一下WGS84與GCJ-02的區(qū)別。雖然微信小程序的getLocation也支持WGS84, 但你打開地圖，使用openLocation只能用GCJ-02，相當(dāng)于隱性強制你用GCJ-02。因為這是國家的一個文件規(guī)定的，名為《導(dǎo)航電子地圖安全處理技術(shù)基本要求》，標準號為GB 20263—2006，該標準的第4節(jié)第4.1款規(guī)定：

4.1 導(dǎo)航電子地圖在公開出版、銷售、傳播、展示和使用前，必須進行空間位置技術(shù)處理。

這個所謂的“空間位置技術(shù)處理”，就是把地圖從GPS坐標使用的 WGS-84 坐標系，轉(zhuǎn)換為“火星坐標系”（GCJ-02）。轉(zhuǎn)換后的偏差一般為 300~500 米。也就是說，你手機GPS獲取的坐標，直接疊加到這個“火星坐標系”的地圖上，會有 300~500 米的偏差。早期高德地圖在野外不準，就是這緣故，在野外沒有其他可供修正的數(shù)據(jù)來校正它。

這就坑了。為什么要這么做，國家告訴你，這是為了保守國家秘密和維護國家安全。查知乎上的文章說，現(xiàn)在美國的導(dǎo)彈能準確到3.5米，因此需要300多米的偏差，保證現(xiàn)有的地圖信息不能被美國直接利用?？墒侨思颐绹膊幌鲇谟媚愕牡貓D信息啊，人家有鎖眼間諜衛(wèi)星，根據(jù)NRO的解密報告，1971年發(fā)射的KH-9衛(wèi)星可分辨地面上至少0.6米的物體;1976年發(fā)射KH-11衛(wèi)星可分辨15厘米的物體，并且傳回來的是顏色照片。

因此單純的GCJ-02地圖數(shù)據(jù)，是無法滿足我們高精度的送餐與導(dǎo)航數(shù)據(jù)的，于是微信小程序的后臺還有高精度數(shù)據(jù)收費項目，或者干脆使用其他定義技術(shù)，如藍牙。

現(xiàn)在我們假裝是高手，自己畫地圖吧，想多精確就有精確，上面還可以放各式各樣的標記，如POI（興趣點，一個POI可以是一棟房子、一個商鋪、一個郵筒、一個公交站等），控制點，指南針，路徑等等。

我們修改xml，加入地圖標簽，然后地圖下面加一個view，說明圖上的標記是什么地方。

<map class="map-container" markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}"></map>
<view class="marker-info">
<view>*{{markers[0].title}}</view>
<view>{{markers[0].address}}</view>
</view>

markers的用法可以詳看這里：

https://developers.weixin.qq.com/miniprogram/dev/component/map.html

onReady: function  {
this.setData({
latitude: 39.984060,
longitude: 116.307520,
markers: [{
id: 100,
latitude: 39.984060,
longitude: 116.307520,
title: '中國技術(shù)交易大廈',
address: '北京市海淀區(qū)北四環(huán)西路66號',
iconPath: '/images/home_press.png'
}]
});
},

最后我們將地圖加一個高度，400px，顯示如下：

通常一幅地圖，我們會安插許多marker，都是超市，飯店，酒店與加油站什么的，主要看你的APP要提供什么服務(wù)。比如導(dǎo)航，就會什么都有，如果是玩樂，就是公園與景點。這些數(shù)據(jù)需要從第三方公司提供。

再來看如果規(guī)則路徑，就是引導(dǎo)用戶如何走。這需要用到polyline屬性，這是一條折線，它由許多點組成，你可以設(shè)置它的顏色，樣式與寬度。

 <map class="navi_map" longitude="102.67484140406796" latitude="25.03682953251695" scale="100" include-points='{{points}}' polyline="{{polyline}}">
</map>

onReady: function  {
var lat=25.03682953251695, lng=102.67484140406796;
var points=[{
latitude: 25.03682953251695,
longitude: 102.67484140406796
},
{
latitude: 25.036132223872958,
longitude: 102.67386832053477
},
{
latitude: 25.035328234772695,
longitude: 102.67441722093537
},
{
latitude: 25.03587706184719,
longitude: 102.67548958617391
},
{
latitude: 25.03682953251695,
longitude: 102.67484140406796
},
]
var polyline=[{
points: points,
color: "#ff0000",
width: 2,
dottedLine: true
}];
this.setData({
longitude: lng,
latitude: lat,
polyline: polyline,
points: points
})
},

難點是如何獲得這些點，我們需要借助PS要地圖上取樣。

如果我們不關(guān)注路徑，而是關(guān)注于一個區(qū)域，可以用polygons。比如共享單車的停車區(qū)域，就可以用到這屬性。我們只需要改一下polyline的定義。

 var polygon=[{//原來是polyline
points: points,
strokeColor: "#ff0000",
strokeWidth: 2,
fillColor: '#a9ea00'
}];
this.setData({
longitude: lng,
latitude: lat,
polygon: polygon,
points: points
})

wxml也只要改動一下：

 <map class="navi_map" longitude="102.67484140406796" latitude="25.03682953251695" scale="100" include-points='{{points}}' polygons="{{polygon}}"></map>

除了這些會隨著地圖拖動跟著移動的標記外，還有一類叫controls的標記，不過現(xiàn)在要用cover-view。它會在地圖中劃出一個fixed的區(qū)域，上面放指南針，放大放小按扭，向上返回按鈕。

下面我們嘗試弄一個搜索框在地圖上。cover-view需要放在map里面，cover-view里面也只能放有限幾種標簽，當(dāng)然你放不支持的標簽也可以的，但會發(fā)出警告，不知什么時候就會完全不支持。

cover-view本身也有許多坑：

1、cover-view不支持背景漸變色，其內(nèi)部的標簽也不能使用漸變色。解決辦法：背景色換成單一顏色。

2、cover-view不支持設(shè)置單一位置的border邊框，比如想加個border-top上邊框線來分割標簽。解決辦法：用cover-view將其高設(shè)置為1px，模擬出一個border邊框線。

3、cover-view不能覆蓋textarea。解決辦法：textarea在失去焦點的時候?qū)⑵涮鎿Q為view標簽，點擊的時候再換回textarea。

 <map class="navi_map" longitude="102.67484140406796" latitude="25.03682953251695" scale="100" include-points='{{points}}' polygons="{{polygon}}">
<!-- 搜索框?qū)崿F(xiàn) -->
<cover-view class='cover-input' bindtap='tapInput'>
<cover-view class='text'>{{inputInfo}}</cover-view>
<input class='input' value='{{inputModel}}' focus='{{inputFocus}}' bindblur='blurInput'></input>
</cover-view>
<!-- 搜索框?qū)崿F(xiàn) -->
</map>

 data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
address: '',
longitude: 0, // 經(jīng)度
latitude: 0, //緯度
markers: ,
polypon: ,
inputFocus: false,
inputModel: '',
inputInfo: 'search',
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
tapInput {
this.setData({
//在真機上將焦點給input
inputFocus: true,
//初始占位清空
inputInfo: ''
});
},
/**
* input 失去焦點后將 input 的輸入內(nèi)容給到cover-view
*/
blurInput(e) {
this.setData({
inputInfo: e.detail.value || 'search'
});
},

然后再加點樣式：

.cover-input{
width: 80%;
height: 32px;
line-height: 32px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.9);
position: relative;
left: 50%;
transform: translateX(-50%);
padding-left: 15rpx;
padding-right: 15rpx;
}
.text{
height: 32px;
line-height: 32px;
}
.input{
height: 32px;
line-height: 32px;
/* margin-top為text的高度，保持視覺上一致 */
margin-top: -32px;
}

如果我們想在里面加一個指南針呢。我們在cover-view里面塞進一個cover-image，圖片長成下面這樣，當(dāng)然還要把準確的角度放上去。

 <cover-image class='compassbg' src='img/compass.png' style='transform:rotate({{rotate}}deg);'></cover-image>

onLoad方法里面加上這幾行代碼就好了。

var that=this
wx.onCompassChange(function (res) {
that.setData({
// 計算應(yīng)偏移度數(shù)
rotate: 360 - res.direction.toFixed(0)
})
});

如果想用更精確的藍牙定位，我們就需要自己根據(jù)藍牙信號自己計算了，用到上面提到的三點定位公式。感興趣的人可以看下面的鏈接：

https://blog.csdn.net/coder_daiwang/article/details/78436996

如果你是土豪玩家，就可以試一下微信小程序的插件，這些插件基本上是另開一個新頁面，里面裝滿你想要的功能。但是使用這些插件需要一個復(fù)雜的接入流量，需要加域名白名單什么的，這里就不演示了。

https://lbs.qq.com/miniprogram_plugin/index.html

最后給大家安利一個地圖開放平臺-騰訊位置服務(wù)，據(jù)說微信APP、小程序里面所有的原生地圖服務(wù)，都是由騰訊位置服務(wù)提供基礎(chǔ)技術(shù)支持，所以基于他們的技術(shù)開發(fā)出來的地圖服務(wù)，與微信小程序的結(jié)合是最天然的，用戶體驗也最為流暢。

可以說，在小程序下面如果需要開發(fā)地圖功能，騰訊位置服務(wù)是最佳選擇?，F(xiàn)在，他們把所有與小程序開發(fā)相關(guān)的內(nèi)容都整合進了一個小程序解決方案，里面有各類為小程序開發(fā)者準備的API、組件、插件、開發(fā)工具、解決方案...可以滿足開發(fā)者不同場景下的需求，強烈推薦大家上去體驗一下。

https://lbs.qq.com/product/miniapp/home/

總結(jié)

LBS的相關(guān)知識是非常小眾，但是非常實用的，本文只是走馬看花地介紹一下其發(fā)展厲害與部分知識點，深入下去，所有知識都能無限被放大。地圖顯示與地點定位是真實對應(yīng)我們這個復(fù)雜的世界。世界有多復(fù)雜，地圖與定位就有復(fù)雜。得益于三大廠商的數(shù)據(jù)沉淀與高度抽象，我們開發(fā)變得更簡單了，公眾生活也變得更美好了。

. 用pix玩車非常簡單，復(fù)雜度遠遠低于無人機；

2. 不管是ardupilot，還是px4固件都是原生支持無人車，不需要做任何代碼改動的二次開發(fā)，需要做的就是參數(shù)修改和傳感器校準；

3. ardupilot需要刷成ardurover固件，這個固件同時也支持船。

a. 輸出1通道接舵機是車輛轉(zhuǎn)向

b. 輸出3通道接電調(diào)，控制油門動力

4. px4固件沒有特定的固件，只需要改改機架到對應(yīng)的車輛即可(SYS_AUTOSTART=50000)

a. 輸出2通道接轉(zhuǎn)向舵機

b. 輸出4通道接無刷電調(diào)

5. 陀螺儀，羅盤校準，這些和無人沒有差別。

6. 解鎖電機，默認手動模式，可以設(shè)置多個模式比如返航，自動等；

給飛控用串口接上帶攝像頭的樹莓派，這樣一個智能車就跑起來了，還帶圖傳和數(shù)傳，如果再給樹莓派接一個帶sim卡的usb無線網(wǎng)卡，這樣一個帶4G的智能小車了。

參考文檔:

https://docs.px4.io/main/en/frames_rover/traxxas_stampede.html
https://ardupilot.org/rover/docs/gettit.html

輯導(dǎo)語：物聯(lián)網(wǎng)，是依托互聯(lián)網(wǎng)技術(shù)、現(xiàn)代傳感技術(shù)等，將空間中的設(shè)備、系統(tǒng)、傳感器數(shù)據(jù)打通，實現(xiàn)人與物、物與物的連接。文章主要介紹了用IDEAS產(chǎn)品五要素方法論協(xié)助系統(tǒng)化構(gòu)思物聯(lián)網(wǎng)產(chǎn)品服務(wù)的一些方法，希望通過此文能夠加深你對智能物聯(lián)網(wǎng)的認識。

一、前言

筆者在SIoT智能家居和智能可穿戴產(chǎn)品行業(yè)具有多年產(chǎn)品經(jīng)理/GTM崗位經(jīng)驗，帶過智能攝像機、智能體脂稱、智能手環(huán)、智能手表品類的多條產(chǎn)品線。兩篇EI論文發(fā)表(ISCID)計算機智能和設(shè)計國際研討會。

本文講IDEAS產(chǎn)品要素方法論，在智能硬件行業(yè)較為適用，國外已廣泛運用。文章主要面向希望從傳統(tǒng)消費產(chǎn)品/互聯(lián)網(wǎng)產(chǎn)品轉(zhuǎn)型到智能硬件行業(yè)產(chǎn)品的朋友。

二、智慧物聯(lián)產(chǎn)品定義和發(fā)展

智慧物聯(lián)產(chǎn)品：Internet of Things(IoT)/Smart Connected Device

在此基礎(chǔ)上衍生的有SIoT（Smart Internet of Things ）、AIoT（人工智能物聯(lián)網(wǎng)）=AI（人工智能）+IoT（物聯(lián)網(wǎng)）、IoE（the Internet of Everything )等概念。

圖：智慧物聯(lián)產(chǎn)品組成

全球范圍表現(xiàn)比較突出的IoT公司有：Microsoft、Amazon、Google、IBM、Cisco、Verizon、AT&T、GE、Fitbit、華米、Honeywell、BlackRock

如：突出的IoT公司

中國各大廠都在積極布局智慧物聯(lián)：小米公司的AIOT 戰(zhàn)略，2020Q4財報顯示平臺連接設(shè)備2.89億臺；百度2020Q4財報首次將自己稱為“AI生態(tài)型公司”；此外，華為5G+Aiot智聯(lián)未來愿景，字節(jié)公司旗下大力教育入局智能教育硬件產(chǎn)品，騰訊和阿里也早已入局。

圖：小米2020Q4財報節(jié)選

展望未來，以深度學(xué)習(xí)的AI 將持續(xù)驅(qū)動AI 加IoT（即AIoT）融合的系統(tǒng)應(yīng)用需求，例如：「AI x 智慧交通」、「AI x 智慧零售」、「AI x 智慧制造」、「AI x 智慧健康」?等應(yīng)用，發(fā)揮軟硬融合的乘法綜效。以CES為例，社群和媒體熱門話題，圍繞在智慧物聯(lián)相關(guān)產(chǎn)品。

圖：2020 CES展覽熱門關(guān)鍵詞

三、什么是好的智慧物聯(lián)產(chǎn)品？

正如德魯克在《管理的實踐》一書中舉例：客戶不是為了購買1厘米的鉆孔機，而是需要一個1厘米的鉆孔。同樣地，沒人去關(guān)心產(chǎn)品連不聯(lián)網(wǎng)，重點在產(chǎn)品為客戶創(chuàng)造什么價值，如何做的更好。

要警惕無用的IoUT產(chǎn)品，物聯(lián)并不意味著有用，避免為了物聯(lián)而物聯(lián)。

智慧物聯(lián)面臨的目標挑戰(zhàn)：

1.解決真正的問題

2.提供更好的解決方案：傳統(tǒng)硬件公司只是將產(chǎn)品銷售給用戶，要保持持續(xù)聯(lián)系的難度或成本較大。這在智慧物聯(lián)時代下將改善，某一產(chǎn)品作為連接其他產(chǎn)品的生態(tài)家族成員之一，向用戶提供【生態(tài)體驗】。

圖：小米的智能生活家和小愛音箱支持的合作品牌

3.增加的成本能對應(yīng)到價值之上：往往伴隨著商業(yè)模式的變革，以后我再單獨寫一篇智慧物聯(lián)產(chǎn)品商業(yè)模式，此處不細展開了。

比如我?guī)н^的產(chǎn)品聯(lián)想(Lenovo)1080P云臺高清智能網(wǎng)絡(luò)攝像頭RC3故宮文創(chuàng)款，除硬件產(chǎn)品銷售利潤外，運營穩(wěn)定情況下，還有10%以上的云存儲收入占比。

圖：聯(lián)想RC3故宮文創(chuàng)款

4.智慧化帶來的產(chǎn)業(yè)鏈上下游洗牌：智能相關(guān)模塊成為核心部件。與智能相關(guān)的傳感器模塊、芯片和觸摸屏等模塊洗牌傳統(tǒng)硬件供應(yīng)鏈。

以智能手表為例，

上游芯片：PA/射頻開關(guān)/藍牙 Wifi GPSxinp /基帶芯片/無線充電芯片/電池管理IC/顯示驅(qū)動IC/eSIM控制芯片/內(nèi)存芯片
中游零部件：觸摸屏/模切/傳感器/FPC/電池/顯示屏
下游組裝代工：設(shè)計制造組裝/Watch Sip

圖：智能手表產(chǎn)業(yè)鏈上下游

四、IDEAS 協(xié)助系統(tǒng)化構(gòu)思物聯(lián)網(wǎng)產(chǎn)品服務(wù)

上節(jié)提到要警惕無用的IoUT產(chǎn)品，智慧物聯(lián)產(chǎn)品最怕的是功能堆疊，產(chǎn)品同質(zhì)化；行業(yè)需要Good IDEAS

圖：智能手環(huán)手表產(chǎn)品功能堆疊

IDEAS 如下方面：

Interface 多元整合體驗
Device 智慧聯(lián)網(wǎng)設(shè)備
Environment （Sensor+Data）環(huán)境數(shù)據(jù)感知與分析
Actor 重要關(guān)系人
Scenario 使用場景

1. I-多元整合體驗

Interface 多元整合體驗指的是：設(shè)備和關(guān)系人之間以及設(shè)備與設(shè)備之間的互動模式。含：

圖：各種輸入介質(zhì)

舉例1：以我在帶的Amazfit Scale 產(chǎn)品為例，體脂稱端的3.4英寸大顯示屏可使用戶一目了然訪問多達八個最重要的身體健康指標，手機APP上則生成含16項數(shù)據(jù)的健康分析報告：體重、BMI、體脂率、肌肉量、水分率、蛋白質(zhì)率、基礎(chǔ)代謝、內(nèi)臟脂肪等級、骨量、骨骼肌、皮下脂肪、身體年齡、理想體重、肌肉變化量、體型、身體得分，來評估整體健康程度的分數(shù)。

圖：Amazfit Scale

舉例2：以我在帶的Zepp E產(chǎn)品為例，基于手表內(nèi)置的NFC功能，實現(xiàn)P7高配車型解鎖、閉鎖等功能，探索智能汽車和智能可穿戴設(shè)備的多場景互聯(lián)，設(shè)備與設(shè)備之間互動，為用戶提供自然、便利的交互體驗。

圖：Zepp E支持小鵬P7 高配車鑰匙功能

2. D-智慧聯(lián)網(wǎng)設(shè)備

Device 智慧聯(lián)網(wǎng)設(shè)備指的是：主要硬件產(chǎn)品，也可能會包含手機或其他聯(lián)網(wǎng)設(shè)備。含：

舉例1：GE Kitchen Hub微波爐內(nèi)置攝像頭，用于遠程監(jiān)控加熱灶的食物或視頻聊天，另有齊全的菜譜應(yīng)用。

圖：GE Kitchen Hub微波爐，攝影師普萊斯CNET

舉例2：以我?guī)н^的產(chǎn)品為例，智能攝像機X1 涵蓋軟件+硬件+云+APP 一體產(chǎn)品服務(wù)整合。

圖：聯(lián)想智能攝像機X1

3. E-環(huán)境數(shù)據(jù)感知與分析

Environment （Sensor+Data）環(huán)境數(shù)據(jù)感知與分析指的是：設(shè)備要配置的傳感器，和期望傳感器實現(xiàn)的功能目的。含：

圖：傳感器分類

舉例1：智能可穿戴設(shè)備常用的傳感器如下，以我在帶的華米Amazfit X和Zepp Z產(chǎn)品為例，產(chǎn)品涵蓋：PPG 生物數(shù)據(jù)傳感器、電極式心電傳感器、陀螺儀、地磁傳感器、加速計、氣壓傳感器、環(huán)境光傳感器、電容傳感器等，來實現(xiàn)功能目標。

圖：Amazfit X 典型功能應(yīng)用

加速度傳感器，典型應(yīng)用：計步應(yīng)用、小米手環(huán)、微信搖一搖…
角速度傳感器，典型應(yīng)用：室內(nèi)游泳、滑雪運動模式…
地磁傳感器，典型應(yīng)用：指南針、無人機飛控、VR設(shè)備…
PPG光學(xué)傳感器，典型應(yīng)用：心率監(jiān)測、血氧飽和度…
ECG心電傳感器，典型應(yīng)用：心電圖測量、米動健康手表、Apple Watch…
氣壓傳感器，典型應(yīng)用：海拔高低、天氣變化
環(huán)境光傳感器，典型應(yīng)用: 降低產(chǎn)品功耗
壓力傳感器，典型應(yīng)用：智能手表操控按鍵、AirPods 切換按鍵

傳感器相當(dāng)于【眼睛】，處理器相當(dāng)于【大腦】

舉例2：數(shù)據(jù)可視化，Zepp App，一個全天候健康管理平臺將各項人體健康數(shù)據(jù)可視化。

華米Amazfit 智能手表接入了全新升級的 Zepp App。Zepp 是一個全天候的健康管理平臺，除了設(shè)置手表之外，還可記錄各種運動、身體狀態(tài)等數(shù)據(jù)，并支持隨時查看專業(yè)指標解讀。通過分析多項數(shù)據(jù)源，對您的身體數(shù)據(jù)進行全方面的管理，隨時隨地了解當(dāng)前身體狀況。

圖：Zepp APP

4. A-重要關(guān)系人

Actor 重要關(guān)系人指的是：使用產(chǎn)品的主要關(guān)系人。含：

舉例1：以可穿戴裝置為例，可從關(guān)系人地圖中推演，可能有多重關(guān)系；不同關(guān)系人有不同的利益考量點。

圖：可穿戴裝置關(guān)系人

舉例2：幫寶適推出的Lumi智能嬰兒監(jiān)控系統(tǒng)，結(jié)合攝像頭和連接嬰兒尿布的傳感器，展示寶寶睡眠量和睡眠質(zhì)量，結(jié)合APP推薦的嬰兒各個發(fā)育階段指導(dǎo)，幫助父母進行嬰兒護理。產(chǎn)品關(guān)系人：醫(yī)生或育兒機構(gòu)建議、父母購買、嬰兒穿戴使用。

圖：幫寶適Lumi

舉例3：以華米公司員工打卡設(shè)備小米手環(huán)為例，決策者是老板，購買者是公司采銷組員工，使用者是華米員工，考勤、步數(shù)等數(shù)據(jù)公司和員工均可查看。

圖：小米手環(huán)5 公司門禁

5. S-使用場景

Scenario 使用場景指的是：上一步驟中使用情境設(shè)計中的情境，讓使用者有持續(xù)使用動機的情境（創(chuàng)造價值、解決問題、提高效率等）。含：

使用場景
使用時間點
服務(wù)用途
達成目的
創(chuàng)造的價值
使用流程

舉例1：以我做過的一個課題為例，在廚房烹飪場景下，探尋用戶的訴求。

舉例2：以我做過的一個課題為例，在出行場景下，探尋小米平衡車的訴求。

圖：浙大商業(yè)設(shè)計創(chuàng)新實驗室，電動出行工具研究

五、總結(jié)

綜上，隨著傳感器通信等成本下降，更多物聯(lián)設(shè)備的進入變得更具有成本效益，必要的技術(shù)如傳感器技術(shù)、5G、機器學(xué)習(xí)等處于合理發(fā)展中，智慧物聯(lián)新時代變革和行業(yè)巨頭洗牌在進行。智慧物聯(lián)產(chǎn)品要避免為了科技而科技，警惕無用的物聯(lián)，為客戶創(chuàng)造有價值的產(chǎn)品。不要（More Functions），要Good IDEAS，運用IDEAS 協(xié)助系統(tǒng)化構(gòu)思物聯(lián)網(wǎng)產(chǎn)品及其服務(wù)。

參考文獻：

[1] 小米集團2020年Q3財報，2020

[2] 百度財報里的伏筆：下一個十年，邁入混合智能時代，澎湃，2020.2.18

[3] 2020 CES美國消費性電子展 CONSUMER ELECTRONICS SHOW Las Vegas，美國，2020

[4] 小米的智能生活家，http://www.mi.com/a/h/13951.html?masid=2726.0097

[5] 小米小愛音箱Pro，https://www.mi.com/buy/detail?product_id=10745

[6] 資策會創(chuàng)研所，徐毓良William Shyu，2015.3

[7] CES 2020最受歡迎的20種產(chǎn)品，幫寶適Lumi，2020

[8] Amazfit X，https://www.amazfit.com/cn/amazfit-x.html

[9] Amazfit 智能運動手表 2，https://www.amazfit.com/cn/watch-2.html

[10] Lenovo攝像頭RC3故宮文創(chuàng)款，https://item.lenovo.com.cn/product/1007171.html?_ga=2.112749572.1241379926.1614326342-612761466.1607594932

[11] Amazfit Scale，https://www.amazfit.com/en/smart-scale.html

[12] 浙大商業(yè)設(shè)計創(chuàng)新實驗室，電動出行工具研究項目，包德福童上李丹郝曉禹，2018

本文由 @尼莫點原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議

在線咨詢

上一篇：像陀螺一樣擺動：天文學(xué)家發(fā)現(xiàn)一個奇異的“三體”星系
下一篇：紐約監(jiān)管機構(gòu)表示會保護在比特幣上的消費者

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

沒有它，我們寸步難行-LBS的淵源與實踐

一、前言