uniApp 地圖使用
uniApp 地圖使用
1、［官網地址］［
https：//
uniapp。dcloud。io/compon
ent/map
］，［外掛市場地址］［
https：//
ext。dcloud。net。cn/
］
2、地圖分顯示，和獲取定位兩部分；顯示可選擇騰訊地圖、高德地圖、百度地圖
3、獲取定位方法由 uniApp 提供，座標為固定的 gcj02、即使設定型別 wgs84，也是得到 gcj02 座標
建立地圖
onReady（） {
let vm = this
vm。map = uni。createMapContext（‘map2’， this）
vm。getLocation（）
}，
methods： {
//獲取定位
getLocation（） {
let vm = this
uni。getLocation（{
type： ‘gcj02’，
geocode： true，//獲取城市具體地址
success： （e） => {
if （e。address。city） {
vm。cityName = e。address。city
vm。poiName = e。address。poiName
vm。moveToLocation（）
}
vm。latitude = e。latitude
vm。longitude = e。longitude
vm。run = ‘start’
vm。addDingwei（）
}，
fail： （e） => {
vm。longitude = 113。953834 //e。longitude
vm。latitude = 22。540235 //e。latitude
vm。run = ‘start’
vm。addDingwei（）
}，
}）
}，
//移動到指定位置
moveToLocation（） {
let vm = this
let falg = Object。keys（vm。map）。length
if （falg） {
vm。map。moveToLocation（{
longitude： vm。longitude，
latitude： vm。latitude，
success： （） => {}
}）
}
}，
//新增定位點
addDingwei（） {
let vm = this，arr = ［］；
arr。push（{
id： 0，
latitude： vm。latitude，
longitude： vm。longitude，
iconPath： ‘。。/。。/static/dingwei。png’，
callout： {
content： ‘刪除此站點’， //文字
color： ‘#ffffff’， //文字顏色
fontSize： 14， //文字大小
borderRadius： 2， //邊框圓角
bgColor： ‘#00c16f’， //背景顏色
display： ‘BYCLICK’， //點選顯示
}，
}）
vm。markers = arr
}，
//點選控制元件
controltap（e） {
let vm = this
if （e。detail。controlId === 0） {
vm。getLocation（）
}
if （e。detail。controlId === 1） {
uni。chooseLocation（{
success： （e） => {
vm。getLine（e）
}
}）
}
}，
//移動地圖位置觸發獲取地圖中心店座標
regionchange（e） {
let vm = this
if （e。type ！= ‘begin’ && vm。run == ‘start’） {
vm。getCenterLocation（）
}
}，
}
喚醒第三方地圖
//引入外掛
import Map from ‘@/js_sdk/fx-openMap/openMap。js’
//既有起點也有終點
var options = {
origin： { //導航起點座標和名稱，如果不傳則起點為當前位置
latitude： vm。latitude，
longitude： vm。longitude，
name： “大沖商務中心C座”
}，
destination： { //導航終點點座標和名稱
latitude： item。latitude，
longitude： item。longitude，
name： item。name
}，
mode： “drive” //導航方式 公交：bus駕車：drive（預設），步行：walk，騎行：bike
}
//只有有終點（起點預設為當前位置）
var options = {
destination： { //導航終點點座標和名稱
latitude： item。latitude，
longitude： item。longitude，
name： item。name
}，
mode： “drive” //導航方式 公交：bus駕車：drive（預設），步行：walk，騎行：bike
}
Map。openMap（options， ‘gcj02’）
app 端生成導航線路
//引入外掛
import Amap from ‘。。/。。/js_sdk/Lyn4ever-gaodeRoutePlanning/lyn4ever-gaode。js’；
//搜尋路線
getLine（item） {
let vm = this
let latitude = JSON。stringify（vm。latitude）。slice（0， 9），
longitude = JSON。stringify（vm。longitude）。slice（0， 10）；
let startPoi = longitude + ‘，’ + latitude；
let wayPoi = “”；
let endPoi = item。longitude + ‘，’ + item。latitude；
vm。polyline = ［］
if （window === undefined） {
Amap。line（startPoi， endPoi， wayPoi， function（res） {
vm。polyline。push（res）
}）；
Amap。markers（startPoi， endPoi， wayPoi， function（res） {
vm。markers = res
}）；
} else {
window。open（‘https：//map。baidu。com/’）
}
}，
階段總結
1，執行環境判斷 window === undefined？“app”：“h5”
2，變數樣式獲取使用 ：style=“mapStyle”||：style=“coverView（）”
3，造輪子之前，先檢視外掛庫，研究研究