uniApp 地圖使用

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，造輪子之前，先查看插件庫，研究研究

總結

以上是生活随笔為你收集整理的app uniapp 获取位置_uniApp 地图使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。