把你的前端拿捏得死死的，每天學(xué)習(xí)得爽爽的，達達前端程序員，微信搜索【程序員哆啦A夢】關(guān)注這個不一樣的程序員。
感謝不負每一份熱愛前端的程序員，不論前端技能有多奇葩，歡迎關(guān)注加我入群vx:xiaoda0423

前言

作為一名在職崗位為【前端開發(fā)工程師】的程序員，我開發(fā)的應(yīng)用程序經(jīng)常需要獲取用戶位置信息，需要再某些場合下使用展示地圖以及地圖商的某些地點，需要獲取行政區(qū)劃列表（省市區(qū)）以及地址詳情信息，需要在地圖上規(guī)劃一條（動態(tài)）路線，軌跡回放，小車移動，需要創(chuàng)建信息窗口，用于地點的摘要性信息的展示。

公司內(nèi)做的是共享項目，場景是這樣的，一種常見共享充電寶（功能差不多和流行的共享單車一樣），在做小程序首頁時，需要做到的是掃碼充電，聯(lián)系客服（問題反饋），獲取地理位置，開篇即是一副地理位置，在你附近獲取到區(qū)域內(nèi)店鋪信息，點擊該店的logo標(biāo)志可以獲取該店的地理位置，營業(yè)時間，店名，距離，是否當(dāng)前該店里是否有可借的充電寶等信息。

共享充電電動車?，首頁也是一副地理位置地圖，可以獲取你附近最近的共享電動車，獲取車的地址，狀態(tài)等信息。顯示該車的剩余電量，使用記錄，租借訂單，獲取行程軌跡，某時間段內(nèi)的里程，動態(tài)顯示軌跡等。

涉及到的共享其實內(nèi)容很多（如除了電動車，充電寶，還可租借設(shè)備等），但大都功能幾乎相同，需要交押金，租借費用，信用免押金等。開發(fā)過app，H5，web網(wǎng)站，小程序項目都與地圖相關(guān)的位置服務(wù)息息相關(guān)，讓我說說與位置服務(wù)有關(guān)的故事。

下面主要還是講解其中的關(guān)于地圖功能等功能，使用的也是騰訊位置開發(fā)服務(wù)。會一步一步說明，做一些案例展示，代碼說明，使用教程。（注意這里我回去看開發(fā)教程，盡量把每個功能都熟悉地說明一下使用方法）

一、騰訊位置服務(wù)是什么？

騰訊位置服務(wù)無疑是獲取位置服務(wù)等信息內(nèi)容，該產(chǎn)品亮點：

定位：為合作伙伴和廣大開發(fā)者提供完善的位置解決方案，已為社交、出行、游戲、商業(yè)、O2O、物流等領(lǐng)域提供專業(yè)精準的定位服務(wù)
地圖：騰訊位置服務(wù)在多平臺為開發(fā)者提供了豐富的地圖展現(xiàn)形式，幫助從屬于不同領(lǐng)域的開發(fā)人員輕松完成構(gòu)建地圖并在其基礎(chǔ)上打造專屬內(nèi)容的工作。同時配合海量數(shù)據(jù)、個性化定制、可視化等能力滿足各個行業(yè)場景下對地圖的需求
地點搜索：基于海量鮮活地點(POI)數(shù)據(jù)，提供周邊搜索，城市范圍搜索，關(guān)鍵詞輸入提示、分類篩選等多種搜索能力，面向社交、物流、出行等行業(yè)打造專屬搜索策略，體驗更勝一籌
路線規(guī)劃：根據(jù)出發(fā)地、目的地以及路線策略設(shè)置，結(jié)合精準的實時交通路況提供駕車、步行、騎行、公交路線規(guī)劃能力，助力開發(fā)者為用戶提供貼心、人性化的出行體驗
微信小程序解決方案：騰訊位置服務(wù)全面擁抱小程序生態(tài)，從服務(wù)API、基礎(chǔ)地圖組件、插件、行業(yè)方案等多個層面服務(wù)不同場景需求的小程序開發(fā)者，助力小程序插上地圖的“翅膀”！
個性化地圖：個性化樣式：千行千面，助力開發(fā)者根據(jù)自身產(chǎn)品的使用場景、界面色調(diào)，選取或者創(chuàng)建風(fēng)格匹配的地圖樣式，體驗更勝一籌；個性化圖層：真實酷炫，助力開發(fā)者將精美繪圖生成地圖瓦片并置于地圖之上，讓旅游景點、大學(xué)高校等區(qū)域的展示效果與眾不同

二、使用步驟

1.uniapp開發(fā)map說明

使用uniapp是因為它是一個使用vue.js開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可以發(fā)布到ios，android，web以及各種小程序，快應(yīng)用等多個平臺。

使用map地圖組件開發(fā)，地圖組件用于展示地圖（使用的時騰訊地圖），說一下它的屬性有：

longitude（類型為Number，沒有默認值，表示中心經(jīng)度）latitude（類型為Number，沒有默認值，表示中心緯度）scale（類型為Number，默認值為16，縮放級別取值范圍為5-18）markers（類型為Array數(shù)組，類型為數(shù)組即表示地圖上可以有多個，沒有默認值，表示標(biāo)記點）polyline（類型為Array數(shù)組，沒有默認值，表示路線，數(shù)組上的所有點連成線）circles（類型Array數(shù)組，表示圓）controls（類型Array數(shù)組，表示控件）include-points（類型Array數(shù)組，表示縮放視野已包含所有給定的坐標(biāo)點）enable-3D（類型為Boolean，默認值為false，表示是否顯示3D摟塊）show-compass（類型為Boolean，默認值為false，表示為是否顯示指南針）enable-overlooking（類型為Boolean，默認值為false，表示為是否開啟俯視）enable-satellite（類型為Boolean，默認值為false，表示為是否開啟衛(wèi)星圖）enable-traffic（類型為Boolean，默認值為false，表示為是否開啟實時路況）show-location（類型為Boolean，表示顯示帶有方向的當(dāng)前定位點）polygons（類型Array，表示為多邊形）

點擊屬性

@markertap-表示點擊標(biāo)記點時觸發(fā)，e.detail={markerId}
@labeltap-表示點擊label時觸發(fā)，e.detail = {markerId}
@callouttap-表示點擊標(biāo)記點對應(yīng)的氣泡時觸發(fā)，e.detail = {markerId}
@controltap-表示點擊控件時觸發(fā)，e.detail = {controlId}
@regionchange-表示視野發(fā)生變化時觸發(fā)
@tap-表示點擊地圖時觸發(fā); App-nuve、微信小程序2.9支持返回經(jīng)緯度
@updated-表示在地圖渲染更新完成時觸發(fā)

我們在寫map組件時，組件的寬/高推薦寫直接量，比如說是 750rpx，不要設(shè)置百分比值，在uni-app中只支持gcj02坐標(biāo)。

介紹markers屬性-類型為數(shù)組Array

由之前描述可知，markers屬性類型為Array，表示標(biāo)記點用于在地圖上顯示標(biāo)記的位置。這個數(shù)組屬性，它里面有它的對象配置屬性，分別是：

id，表示標(biāo)記點id，類型為Number，必填項，marker點擊事件回調(diào)會返回此id，建議為每個marker設(shè)置上Number類型id，保證更新marker時有更好的性能。
latitude，緯度，類型Number，必填項，浮點數(shù)，范圍 -90 ~ 90
longitude，經(jīng)度，類型Number，必填項，浮點數(shù)，范圍 -180 ~ 180
title，標(biāo)注點名，類型String，不是必填，點擊時顯示，callout存在時將被忽略
iconPath，顯示的圖標(biāo)，類型String，必填項，項目目錄下的圖片路徑
rotate，旋轉(zhuǎn)角度，類型Number，不是必填，順時針旋轉(zhuǎn)的角度，范圍 0 ~ 360，默認為 0
alpha，標(biāo)注的透明度，類型Number，不是必填，默認1，無透明，范圍 0 ~ 1
width，標(biāo)注圖標(biāo)寬度，類型Number，不是必填，默認為圖片實際寬度
height，標(biāo)注圖標(biāo)高度，類型Number，不是必填，默認為圖片實際高度
callout，自定義標(biāo)記點上方的氣泡窗口，類型Object，不是必填 - 可識別換行符
label，為標(biāo)記點旁邊增加標(biāo)簽，類型Object，不是必填 - 可識別換行符
anchor，經(jīng)緯度在標(biāo)注圖標(biāo)的錨點，默認底邊中點，不是必填，{x, y}，x表示橫向(0-1)，y表示豎向(0-1)。{x: .5, y: 1} 表示底邊中點

marker 上的氣泡 callout（Object類型）

marker數(shù)組上屬性 callout 對象使用屬性：

content，文本，String
color，文本顏色，String
fontSize，文字大小，Number
borderRadius，callout邊框圓角，Number
bgColor，背景色，String
padding，文本邊緣留白，Number
display，'BYCLICK':點擊顯示; 'ALWAYS':常顯，String
textAlign，文本對齊方式。有效值: left, right, center，String

marker 上的標(biāo)簽 label（Object類型）

content，文本，String
color，文本顏色，String
fontSize，文字大小，Number
x，label的坐標(biāo)，原點是 marker 對應(yīng)的經(jīng)緯度，Number
y，label的坐標(biāo)，原點是 marker 對應(yīng)的經(jīng)緯度，Number
borderWidth，邊框?qū)挾龋琋umber
borderColor，邊框顏色，String
borderRadius，邊框圓角，Number
bgColor，背景色，String
padding，文本邊緣留白，Number
textAlign，文本對齊方式。有效值: left, right, center，String

polyline

polyline表示指定一系列坐標(biāo)點，從數(shù)組第一項連線至最后一項

points，經(jīng)緯度數(shù)組，類型為Array，必填，如：[{latitude: 0, longitude: 0}]
color，線的顏色，類型為String，不必填，如：#0000AA
width，線的寬度，類型為Number，不必填
dottedLine，是否虛線，類型為Boolean，不必填，默認值false
arrowLine，帶箭頭的線，類型為Boolean，不必填，默認值為false
arrowIconPath，更換箭頭圖標(biāo)，類型為String，不必填，在arrowLine為true時，默認帶箭頭的線時生效
borderColor，線的邊框顏色，類型為String，不必填
borderWidth，線的厚度，類型為Number，不必填

polygon

polygon指定一系列坐標(biāo)點，根據(jù)points坐標(biāo)數(shù)據(jù)生成閉合多邊形

points，經(jīng)緯度數(shù)組，array，必填，如：[{latitude: 0, longitude: 0}]
strokeWidth，描邊的寬度，Number，否
strokeColor 描邊的顏色，String，否
fillColor，填充顏色，String，否
zIndex，設(shè)置多邊形 Z 軸數(shù)值，Number，否

circles

circles在地圖上顯示圓

latitude，緯度，Number，必填，浮點數(shù)，范圍 -90 ~ 90
longitude，經(jīng)度，Number，必填，浮點數(shù)，范圍-180 ~ 180
color，描邊的顏色，String，不必填，如：#0000AA
fillColor，填充顏色，String，不必填，如：#0000AA
radius，半徑，Number，必填
strokeWidth，描邊的寬度，Number，不必填

controls

controls在地圖上顯示控件，控件不隨著地圖移動

id，控件id，Number，不必填，在控件點擊事件回調(diào)會返回此id
position，控件在地圖的位置，Object，必填，控件相對地圖位置
iconPath，顯示的圖標(biāo)，String，必填，項目目錄下的圖片路徑，支持相對路徑寫法，以'/'開頭則表示相對項目根目錄；也支持臨時路徑
clickable，是否可點擊，Boolean，不必填，默認不可點擊

position

left，距離地圖的左邊界多遠，Number，不必填，默認為0
top，距離地圖的上邊界多遠，Number，不必填，默認為0
width，控件寬度，Number，不必填，默認為圖片寬度
height，控件高度，Number，不必填，默認為圖片高度

注意在uniapp中地圖組件的經(jīng)緯度必填，如果不填，經(jīng)緯度則默認值是北京的經(jīng)緯度。

2.uniapp使用map組件

基本使用方法

使用uniapp開發(fā)中的map組件，基本使用方法：

代碼如下（示例）：

"scale"?style="width:?100%;?height:?100%;"
enable-3D="false"?show-compass="false"?enable-overlooking="false"
:enable-satellite="false"?:enable-traffic="false"?show-location="false"
:latitude="latitude"?:longitude="longitude"?:markers="covers">
</map>

markers屬性的使用，代碼如下（示例）：

markers:?[{
?id:?1,?//?Number
?title:?'1',?//?String-標(biāo)注點名
?rotate:?180,?//?Number?-?順時針旋轉(zhuǎn)的角度，范圍?0?~?360，默認為?0
?alpha:?0.5,?//?默認1，無透明，范圍?0?~?1
?latitude:?39.899,
?longitude:?116.39742,
?width:?30,
?height:?30,
?//?callout:?{
?//??display:?"BYCLICK",
?//??padding:?10,
?//??borderRadius:?5,
?//??content:?'',
?//?},
?//?anchor:?{},
?iconPath:?'../../../static/location.png',?//?顯示的圖標(biāo)
},?{
?id:?2,
?title:?'2',?//?String
?latitude:?39.90,
?longitude:?116.39,
?callout:?{
??color:?'#007AFF',?//?文本顏色
??bgColor:?'#563BFF',?//?背景色
??display:?"ALWAYS",?//?'BYCLICK':點擊顯示;?'ALWAYS':常顯
??fontSize:?15,
??textAlign:?'left',?//?文本對齊方式。有效值: left, right, center
??padding:?10,?//?文本邊緣留白
??borderRadius:?5,
??content:?'騰訊地圖',
?},
?label:?{
??content:?'Jeskson',
??color:?'#000000',
??fontSize:?12,
??borderWidth:?12,
??borderColor:?'#007AFF',
??borderRadius:?5,
??padding:?5,
??textAlign:?'center',
??bgColor:?'#563BFF',
?},
?iconPath:?'../../../static/location.png'
}]

預(yù)覽效果如下：

controls:[{
????//?在地圖上顯示控件，控件不隨著地圖移動
????id:?1,?//?控件id
?iconPath:'../../static/icon.png',?//?顯示的圖標(biāo)
?position:{
??//?控件在地圖的位置
??left:?15,
??top:?15,
??width:?50,
??height:?50
???},????
}],

地址搜索

uni-app 只支持 gcj02 坐標(biāo)

uni.getLocation(OBJECT)中的object參數(shù)

獲取當(dāng)前的地理位置、速度。在微信小程序中，當(dāng)用戶離開應(yīng)用后，此接口無法調(diào)用，除非申請后臺持續(xù)定位權(quán)限；當(dāng)用戶點擊“顯示在聊天頂部”時，此接口可繼續(xù)調(diào)用。

OBJECT參數(shù)說明

type，String，不必填，默認為 wgs84 返回 gps 坐標(biāo)，gcj02 返回國測局坐標(biāo)，可用于 uni.openLocation 的坐標(biāo)，app平臺高德SDK僅支持返回gcj02
altitude，Boolean，不必填，傳入 true 會返回高度信息，由于獲取高度需要較高精確度，會減慢接口返回速度
geocode，Boolean，不必填，默認false，是否解析地址信息
success，Function，必填，接口調(diào)用成功的回調(diào)函數(shù)，返回內(nèi)容詳見返回參數(shù)說明
fail，Function，不必填，接口調(diào)用失敗的回調(diào)函數(shù)
complete，Function，不必填，接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

對于success返回參數(shù)說明：

latitude，緯度，浮點數(shù)，范圍為-90~90，負數(shù)表示南緯
longitude，經(jīng)度，浮點數(shù)，范圍為-180~180，負數(shù)表示西經(jīng)
speed，速度，浮點數(shù)，單位m/s
accuracy，位置的精確度
altitude，高度，單位 m
verticalAccuracy，垂直精度，單位 m（Android 無法獲取，返回 0）
horizontalAccuracy，水平精度，單位 m
address，地址信息（僅App端支持，需配置geocode為true）

address 地址信息說明

country，String，國家如“中國”，沒有則返回undefined
province，String，省份名稱如“北京市”，沒有則返回undefined
city，String，城市名稱，如“北京市”，沒有則返回undefined
district，String，區(qū)，縣名稱如“朝陽區(qū)”，沒有則返回undefined
street，String，街道信息，如“酒仙橋路”，沒有則返回undefined
streetNum，String，獲取街道門牌號信息，如“3號”，沒有則返回undefined
poiName，String POI信息，如“電子城．國際電子總部”，沒有則返回undefined
postalCode，String，郵政編碼，如“100016”，沒有則返回undefined
cityCode，String，城市代碼，如“010”，沒有則返回undefined

uni.chooseLocation(OBJECT)打開地圖選擇位置。

latitude，String，不必填，目標(biāo)地緯度
longitude，String，不必填，目標(biāo)地經(jīng)度
keyword，String，不必填，搜索關(guān)鍵字，僅App平臺支持
success，Function，必填
fail，Function，不必填
complete，Function，不必填

success返回參數(shù)說明：

name，位置名稱
address，詳細地址
latitude，緯度，浮點數(shù)，范圍為-90~90，負數(shù)表示南緯，使用 gcj02 國測局坐標(biāo)系。
longitude，經(jīng)度，浮點數(shù)，范圍為-180~180，負數(shù)表示西經(jīng)，使用 gcj02 國測局坐標(biāo)系。

代碼如下（示例）：

chooseLocation(e)?{?//打開地圖選擇位置
?uni.chooseLocation({
??success:?res?=>?{
???console.log('位置名稱：'?+?res.name);
???console.log('詳細地址：'?+?res.address);
???console.log('緯度：'?+?res.latitude);
???console.log('經(jīng)度：'?+?res.longitude);
???uni.getLocation({
????type:?'gcj02',
????altitude:true,
????geocode:true,
????success:?function(res)?{
?????console.log('當(dāng)前位置的經(jīng)度：'?+?res.longitude);
?????console.log('當(dāng)前位置的緯度：'?+?res.latitude);
????}
???});
???console.log('省：'?+?res.address.slice(0,?res.address.indexOf('省')?+?1));
???console.log('市：'?+?res.address.slice(res.address.indexOf('省')?+?1,?res.address.indexOf('市')?+?1));
???console.log('區(qū)：'?+?res.address.slice(res.address.indexOf('市')?+?1,?res.address.indexOf('區(qū)')?+?1));
???this.query.address?=?res.address;
???this.query.latitude?=?res.latitude;
???this.query.longitude?=?res.longitude;
???this.query.province?=?res.address.slice(0,?res.address.indexOf('省')?+?1)
???this.query.city?=?res.address.slice(res.address.indexOf('省')?+?1,?res.address.indexOf('市')?+?1)
???this.query.district?=?res.address.slice(res.address.indexOf('市')?+?1,?res.address.indexOf('區(qū)')?+?1)
??}
?});
},

預(yù)覽效果：

獲取附近的動態(tài)，點聚合

uni.getNetworkType(OBJECT)獲取網(wǎng)絡(luò)類型。

uni.createMapContext(mapId,this)創(chuàng)建并返回 map 上下文 mapContext 對象。在自定義組件下，第二個參數(shù)傳入組件實例this，以操作組件內(nèi) 組件。

mapContext-mapContext 通過 mapId 跟一個組件綁定，通過它可以操作對應(yīng)的組件。

該對象得方法列表：

getCenterLocation OBJECT 獲取當(dāng)前地圖中心的經(jīng)緯度，返回的是 gcj02 坐標(biāo)系，可以用于 uni.openLocation
moveToLocation OBJECT 將地圖中心移動到當(dāng)前定位點，需要配合map組件的show-location使用
translateMarker OBJECT 平移marker，帶動畫
includePoints OBJECT 縮放視野展示所有經(jīng)緯度
getRegion OBJECT 獲取當(dāng)前地圖的視野范圍
getScale OBJECT 獲取當(dāng)前地圖的縮放級別
$getAppMap 獲取原生地圖對象 plus.maps.Map

getCenterLocation 的 OBJECT 參數(shù)列表

success Function 不必填，接口調(diào)用成功的回調(diào)函數(shù) ，res = { longitude: "經(jīng)度", latitude: "緯度"}

moveToLocation 的 OBJECT 參數(shù)列表 - 可不必填

translateMarker 的 OBJECT 參數(shù)列表

markerId Number 必填指定 marker
destination Object 必填指定 marker 移動到的目標(biāo)點
autoRotate Boolean 不必填移動過程中是否自動旋轉(zhuǎn) marker
rotate Number 不必填 marker 的旋轉(zhuǎn)角度
duration Number 不必填動畫持續(xù)時長，默認值1000ms，平移與旋轉(zhuǎn)分別計算
animationEnd Function 不必填動畫結(jié)束回調(diào)函數(shù)
fail Function 不必填接口調(diào)用失敗的回調(diào)函數(shù)

代碼如下（示例）：

"activeMap">
?<view?@tap="activeMarker={}">
??<view?class="page-body?map-view"?style="z-index:?1;position:?relative;">
???<view?class="page-section?page-section-gap?map-view">
????<map?:markers="shops"?id="map1"?:show-location="true"?:latitude="latitude"?:longitude="longitude"?@regionchange="regionChange"
?????@markertap="markerTap"?@tap="activeMarker={}">
?????
?????
?????
????map>
????<cover-image?class="map-image"?src="../static/address.png">cover-image>
???view>
??view>
?view>
</view>

regionChange()?{?//?移動地圖后重新獲取門店
?uni.createMapContext('map1',?this).getCenterLocation({
??success:?res?=>?{
???console.log(res.latitude)
???console.log(res.longitude)
???this.shopTimeout?=?setTimeout(_?=>?{
????this.shops?=?[{
?????address:?"廣東省汕頭市xxx區(qū)xx大道1",
?????distance:?122,
?????end_time:?"1",
?????id:?2,
?????latitude:?"22.72078500009999",
?????longitude:?"114.36090200009999",
?????shop:?{
??????iconPath:?'/static/logo.png',
??????id:?3,
??????latitude:?"22.72078500009999",
??????longitude:?"114.36090200009999",
??????height:?34,
??????width:?34,
??????shop:?{return:?0}
?????},
?????return:?0,
?????height:?34,
?????width:?34,
?????start_time:?"1",
?????store_name:?"三星大酒店",
?????iconPath:?'/static/shop.png',
????}]
???},?500)
??},
??fail:?res?=>?{
???uni.showModal({
????content:?'獲取位置失敗',
????showCancel:?false
???})
??}
?})
},

預(yù)覽效果圖如下：

地圖上標(biāo)注附近的人

代碼如下（示例）：

list:?[{
?id:?1264640,
?user_id:?335187,
?place:?"Jeskson市",
?text:?"dadaqianduan.cn",
?latitude:?"27.267520",
?longitude:?"111.727120",
?status:?"normal",
?nickname:?"dada",
?avatar:?"https://image.aishencn.com/2020/10/20/002207441_40845724-user.jpg",
?distance:?13419,
},?{
?id:?1272720,
?user_id:?36950,
?place:?"dadaqianduan市",
?text:?"dadaqianduan.cn",
?latitude:?"27.257640",
?longitude:?"111.747910",
?deletetime:?null,
?status:?"normal",
?nickname:?"dadaqianduan",
?avatar:?"https://image.aishencn.com/2020/04/09/004135379_37869100-user.jpg",
?distance:?27070,
},?{
?id:?1316740,
?user_id:?366172,
?place:?"dadaqianduan.cn",
?text:?"dadaqianduan.cn",
?images:?"https://image.aishencn.com/2020/11/04/215134979_98197351-bbs.jpg",
?latitude:?"27.257430",
?longitude:?"111.732960",
?status:?"normal",
?nickname:?"dada",
?avatar:?"https://image.aishencn.com/2020/11/04/182622730_98197351-user.venus/cache/ext/crop/1604518314542_jpg",
?distance:?27190,
?images_arr:?["https://image.aishencn.com/2020/11/04/215134979_98197351-bbs.jpg"]
}],

預(yù)覽效果如圖：

定位附近門店

代碼如下（示例）：

//?兩點間距離
distance(la1,?lo1,?la2,?lo2)?{
?var?La1?=?(la1?*?Math.PI)?/?180.0
?var?La2?=?(la2?*?Math.PI)?/?180.0
?var?La3?=?La1?-?La2
?var?Lb3?=?(lo1?*?Math.PI)?/?180.0?-?(lo2?*?Math.PI)?/?180.0
?var?s?=
??2?*
??Math.asin(
???Math.sqrt(
????Math.pow(Math.sin(La3?/?2),?2)?+
????Math.cos(La1)?*?Math.cos(La2)?*?Math.pow(Math.sin(Lb3?/?2),?2)
???)
??)
?s?=?s?*?6378.137?//地球半徑
?s?=?Math.round(s?*?10000)?/?10000
?return?s
},
//?計算最近的距離
nearDistance(array,?centerLatitude,?centerLongitude)?{
?let?temp?=?[]
?for?(let?i?=?0,?l?=?array.length;?i???const?element?=?array[i]
??let?d?=?this.distance(
???element.latitude,
???element.longitude,
???centerLatitude,
???centerLongitude
??)
??temp.push(d)
?}
?this.distanceL?=?Math.min.apply(null,?temp)
}

效果如下圖：

滑動軌跡

代碼如下（示例）：

"polyline"?:scale="scale"?id="maps"?:markers="markers"?:latitude="center.latitude"
:longitude="center.longitude">
</map>

//?播放標(biāo)記點
playMarkars()?{
?if?(this.polyline.length?==?0)?{
??uni.showModal({
???content:?'當(dāng)前時間范圍內(nèi)沒有軌跡，無法播放！',
??})
??this.isPlay?=?false?//?無
??this.playIndex?=?0?//?第一個
??return
?}
?this.playIndex?=?Math.min(this.points.length?-?1,?this.playIndex)
?this.markers?=?[this.formatMarker(this.points[this.playIndex++],?'ALWAYS')]
?this.timer?=?setInterval(_?=>?{
??var?i?=?this.playIndex++
??this.nextAdaress(i);
??if?(i?>=?this.points.length)?{
???clearInterval(this.timer)
???this.isPlay?=?false
???this.playIndex?=?0
???this.initMarkers()
???return
??}
??this.markers?=?[this.formatMarker(this.points[i],?'ALWAYS')]
?},?1000)
},

formatMarker(point,?display?=?"BYCLICK")?{
?let?content?=?[
??"時間："?+?parseTime(point.create_time),
??"運動狀態(tài)："?+?(point.sport?==?1???'運動'?:?'靜止'),
??"地址："?+?point.address?||?''
?]
?return?{
??id:?point.id,
??iconPath:?'/static/dada.png',
??width:?35,
??height:?35,
??latitude:?point.latitude,
??longitude:?point.longitude,
??callout:?{
???display:?display,
???padding:?10,
???borderRadius:?5,
???content:?content.join("\n")
??}
?}
},
nextAdaress(index)?{
?const?len?=?10;
?if?(this.isGetAddress)?{
??return
?}
?for?(let?i?=?0;?i???if?(!this.points[i?+?index])?{
???break
??}
??if?(this.points[i?+?index].address?===?undefined)?{
???this.isGetAddress?=?true
???this.getAddress(i?+?index,?len?*?2,?_?=>?{
????this.isGetAddress?=?false
???});
???break
??}
?}
},

圖片效果如下：

vue接入騰訊地圖接口

騰訊（推薦）

https://apis.map.qq.com/ws/location/v1/ip={$ip}&key={$key}

需要申請key，速度快，有基本信息

首頁點擊可以進行注冊，申請一個獲取key：https://lbs.qq.com?lbs_invite=VJJIFLV

key管理，創(chuàng)建新密鑰，填寫相應(yīng)信息即可

1.創(chuàng)建地圖預(yù)覽效果圖如下：

2.地圖加載完成效果圖：

使用前需要在index.html里引入才可以使用地圖。

2023?輕識隱私協(xié)議用戶協(xié)議關(guān)于我們機器人浙ICP備19021730號-8浙公網(wǎng)安備
        33011002017279號

<kbd id="afajh"><form id="afajh"></form></kbd><strong id="afajh"><dl id="afajh"></dl></strong>

<del id="afajh"><form id="afajh"></form></del>


<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>


欧美三级韩国三级日本三斤在线观看en
|
大逼逼影院
|
五月色情网|
国产国产国产在线无码视频
|
尤 物视频在线播放
|

騰訊位置服務(wù)開發(fā)應(yīng)用-使用教程，案例分享，知識總結(jié)

前言

一、騰訊位置服務(wù)是什么？

二、使用步驟

1.uniapp開發(fā)map說明

介紹markers屬性-類型為數(shù)組Array

marker 上的氣泡 callout（Object類型）

marker 上的標(biāo)簽 label（Object類型）

polyline

polygon

circles

controls

position

2.uniapp使用map組件

基本使用方法

地址搜索

獲取附近的動態(tài)，點聚合

地圖上標(biāo)注附近的人

定位附近門店

滑動軌跡

vue接入騰訊地圖接口