app uniapp 获取位置_uniApp 地图使用
uniApp 地圖使用
2、地圖分顯示，和獲取定位兩部分；顯示可選擇騰訊地圖、高德地圖、百度地圖
3、獲取定位方法由 uniApp 提供，坐標(biāo)為固定的 gcj02、即使設(shè)置類型 wgs84,也是得到 gcj02 坐標(biāo)
創(chuàng)建地圖
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()
},
})
},
//移動(dòng)到指定位置
moveToLocation() {
let vm = this
let falg = Object.keys(vm.map).length
if (falg) {
vm.map.moveToLocation({
longitude: vm.longitude,
latitude: vm.latitude,
success: () => {}
})
}
}，
//添加定位點(diǎn)
addDingwei() {
let vm = this,arr = [];
arr.push({
id: 0,
latitude: vm.latitude,
longitude: vm.longitude,
iconPath: '../../static/dingwei.png',
callout: {
content: '刪除此站點(diǎn)', //文本
color: '#ffffff', //文字顏色
fontSize: 14, //文本大小
borderRadius: 2, //邊框圓角
bgColor: '#00c16f', //背景顏色
display: 'BYCLICK', //點(diǎn)擊顯示
},
})
vm.markers = arr
},
//點(diǎn)擊控件
controltap(e) {
let vm = this
if (e.detail.controlId === 0) {
vm.getLocation()
}
if (e.detail.controlId === 1) {
uni.chooseLocation({
success: (e) => {
vm.getLine(e)
}
})
}
},
//移動(dòng)地圖位置觸發(fā)獲取地圖中心店坐標(biāo)
regionchange(e) {
let vm = this
if (e.type != 'begin' && vm.run == 'start') {
vm.getCenterLocation()
}
},
}
喚醒第三方地圖
//引入插件
import Map from '@/js_sdk/fx-openMap/openMap.js'
//既有起點(diǎn)也有終點(diǎn)
var options = {
origin: { //導(dǎo)航起點(diǎn)坐標(biāo)和名稱,如果不傳則起點(diǎn)為當(dāng)前位置
latitude: vm.latitude,
longitude: vm.longitude,
name: "大沖商務(wù)中心C座"
},
destination: { //導(dǎo)航終點(diǎn)點(diǎn)坐標(biāo)和名稱
latitude: item.latitude,
longitude: item.longitude,
name: item.name
},
mode: "drive" //導(dǎo)航方式 公交：bus駕車：drive(默認(rèn)),步行：walk,騎行：bike
}
//只有有終點(diǎn)(起點(diǎn)默認(rèn)為當(dāng)前位置)
var options = {
destination: { //導(dǎo)航終點(diǎn)點(diǎn)坐標(biāo)和名稱
latitude: item.latitude,
longitude: item.longitude,
name: item.name
},
mode: "drive" //導(dǎo)航方式 公交：bus駕車：drive(默認(rèn)),步行：walk,騎行：bike
}
Map.openMap(options, 'gcj02')
app 端生成導(dǎo)航線路
//引入插件
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/')
}
},
階段總結(jié)
1，運(yùn)行環(huán)境判斷 window === undefined？“app”：“h5”
2，變量樣式獲取使用 :style="mapStyle"||:style="coverView()"
3，造輪子之前，先查看插件庫(kù)，研究研究
總結(jié)
以上是生活随笔為你收集整理的app uniapp 获取位置_uniApp 地图使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： vivo X100系列全新设计正式公布！
- 下一篇： vfifo控制mig_MIG IP控制D