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