uniapp地图控件（浅显使⽤）
  前些天经⼿写了⼀个物流项⽬，发现使⽤地图的时候，真的是⼤坑套⼩坑(还是浅显使⽤)，所以就来记录⼀下，也分享⼀下⼀些⼼得吧。(本⽂⽅法不兼容电脑浏览器使⽤，所以调试的时候请使⽤⼿机调试)
  因为项⽬需要兼容h5，⽽我⼜是直接⽤的原⽣<map>标签，所以引⼊了外部jdk: qqmap-wx-jssdk.js，可以直接在下载，下载完成以后就可以把js⽂件解压到项⽬中，因为需要改写⼀点点地⽅，所以不推荐使⽤压缩版的js
  因为是wxjdk，所以第⼀步就先修改⼀些东西来兼容，(以下代码均为查询结果)
  html地图部分代码：其中宽⾼⼤家⾃⾏根据需求更改
<map
v-if="showMap"
class="choose-map"
id="isUseMap"
ref="UseMap"
:latitude="selfLatitude"
:longitude="selfLongitude"
:markers="marker"
:polyline="polyline"
@tap="selectPoint"
@markertap="markettap"
@callouttap="callouttap"
@regionchange="regionchange"
:scale="scale"
></map>
  其中所代表的是什么我就不⼀⼀说明了，v-if判断是为了解决地图展⽰后标记点有可能会失败的情况，所以我在获取到当前位置标点的时候在渲染地图，这⾥所谓仁者见仁，智者见智吧。
  qqmap-wx-jssdk.js：
1/**
2 * 这⾥是重写部分
3*/
4var vm = ''
5
6var wx = {
7    request(obj){
8        obj.data.output = 'jsonp'
9        vm.$jsonp(obj.url,obj.data)
10        .then(json => {
11if(json.status == 0){
12                    obj.success(json)
13                }else {
14                    obj.fail(json)
15                }
16            })
17            .catch(err => {
18                obj.fail(err)
19            })
20    }
21 }
  改完以后保存、引⼊。
  引⼊以后⾸先创建实例：
1 import QQMapWX from '@/common/qqmap-wx-jssdk.js';
2// TXMapkey是申请的qqmap key值
3this.qqMap = new QQMapWX({ key: this.TXMapkey, vm: this });
  创建完成后，就可以开始使⽤地图了，使⽤当前地图实例的时候可以参照上⾯分享的jdk⽂档，亲试可⽤(我觉得我应该说了句废话)。
  使⽤地图：①定位(getLocation) --> ②标点(market) --> ③搜索(chooseAddress) --> ④路线 ;（本⼈技术有限，只写了这四种常⽤功能，写起代码来很混乱兼⽤了好⼏种⽅法）
  ①定位(getLocation)：
  uniapp官⽅原⽣也给了⼀种获取定位的⽅法(但是总是会有⼀些顾及不到的地⽅)：
  其中获取定位类型有好⼏种，官⽅原⽣App给出的是⾼德地图⽀持 gcj02 类型，但是为了兼容h5所以这⾥使⽤ wgs84 类型坐标；
type: 'wgs84',
geocode: true, // 获取地址详情
success: res => {
_that.selfLatitude = res.latitude;
_that.selfLongitude = res.longitude;
_that.addMarkets(res, 0); // 定位标出⾃⾝所在点
},
fail: err => {...},
complete: () => {...}
});
  官⽅原⽣获取定位坐标的API，但是很可惜，他好像并不兼容h5，所以我再执⾏完以后(complete)⾥⾯执⾏了WXSDK：
// #ifdef H5
_verseGeocoder({
location: {
latitude: _that.selfLatitude,
longitude: _that.selfLongitude
},
success: function(res) {
_that.selfLatitude = sult.location.lat;
_that.selfLongitude = sult.location.lng;
_that.keyword = sult.address;
_that.addMarkets(res, 1);
},
fail: function(res) {},
complete: function(res) {}
});
// #endif
  到这⾥为⽌可以说有百分之⼋⼗的⼏率能获取到当前位置，但是总是还有⼀些问题，就⽐如标记点的问题，也可能是定位失败，这个坑我没有本事直接给添上，只能⼜加了⼀种办法(在WXJDK失败的时候fail)：
fail: function(res) {
res => {
let lati = ds.latitude,
long = ds.longitude,
positionAddress = ansform([long, lati], gcoord.WGS84, gcoord.GCJ02);
_that.selfLatitude = positionAddress[1];
_that.selfLongitude = positionAddress[0];
_verseGeocoder({
location: {
latitude: positionAddress[1],
longitude: positionAddress[0]
}，
success: function(res) {
_that.selfLatitude = sult.location.lat;
_that.selfLongitude = sult.location.lng;
_that.keyword = sult.address;
_that.addMarkets(res, 1);
}，
fail: err => {}
});
}，function(err){},
{
enableHighAccuracy: true,
geocode: true,
maximumAge: 30000,
timeout: 20000
}  )
}
  是的！你没有看错，我再疯狂的套娃，其中还是⽤了html5plus API  CurrentPosition 但这其中有⼀些问题，所以需要⼀个插件gcoord来把获取到的经纬度给处理⼀下，我也不知道该怎么解释，反正就是直接获取的经纬度不能⽤...对
在获取到经纬度以后我⼜⼀次的使⽤了WXJDK来确定当前位置并且添加标记点，到这⾥定位并且标记应该是没有问题了
  ②标点(market) ：
/
/ ⾸次添加标记点
addMarkets(res, type) {
let result;
if (type == 0 || type == 2) {
// 原⽣定位
result = {
latitude: sult.location.lat,
longitude: sult.location.lng,
name: (res.address && res.address.poiName) || ''
};
console.log(JSON.stringify(result));
/
/ console.log('原⽣定位')
} else if (type == 1) {
// 腾讯定位
result = {
latitude: sult.location.lat,
longitude: sult.location.lng,
name: sult.address || ''
};
// console.log('腾讯定位')
}
let _that = this;
let market = {
id: ++_that.mid,
latitude: result.latitude,
longitude: result.longitude,
iconPath: '/static/images/market-img.png',
callout: {
content: result.name,
color: '#ffffff',
fontSize: '14',
display: 'ALWAYS',
bgColor: '#FF6F1E',
padding: '20',
textAlign: 'center',
borderRadius: '25'
}
};
_that.markers[0] = market;
_that.markers = [..._that.markers];
控件的使用_that.fromAddress = result.name;
_that.showMap = true;
},
  上⾯获取定位的时候⼀部分上就是因为market点的问题，以上代码就是标记点，官⽹⽐我这边清楚。
  ③搜索(chooseAddress)：
chooseAddress(type, index) {
// type是我的逻辑，index是出发地(0)与⽬的地(1)
let _that = this;
uni.chooseLocation({
keyword: _that.keyword,
success: res => {
let market = {
id: ++_that.mid,
latitude: res.latitude,
longitude: res.longitude,
iconPath: '/static/images/market-img.png',
callout: {
content: res.name,
color: '#ffffff',
fontSize: '14',
display: 'ALWAYS',
bgColor: '#FF6F1E',
padding: '20',
textAlign: 'center',
borderRadius: '25'
}
};
if (index == 0) {
_that.fromAddress = res.name;
}
if (index == 1) {
_Address = res.name;
}
_that.includePoints[index] = market;
_that.includePoints = [..._that.includePoints];
_that.markers[index] = market;
_that.markers = [..._that.markers];
/
/ 路线
_TXDirection();
}
});
  其中标记点⼜出问题，问题出在了什么地⽅我也解释不清楚(希望有⼤佬看到的话可以告知⼩弟)，可以⽤计算属性来解决：computed: {
marker() {
return this.markers.slice(0, 2);
},
return this.includePoints.slice(0, 2);
}
},
  ④路线：
  这⾥路线我给出了两种获取路线的⽅法，⼤家可以参照⼀下：
  第⼀种：⾼德地图
// ⾼德获取路线
getDirection() {
let _that = this,
origins = _that.markers[0].longitude + ',' + _that.markers[0].latitude,
destination = _that.markers[1].longitude + ',' + _that.markers[1].latitude;
DrivingRoute({
origin: origins,
destination: destination,
success: data => {
let points = [];
if (data.paths && data.paths[0] && data.paths[0].steps) {
var steps = data.paths[0].steps;
for (var i = 0; i < steps.length; i++) {
var poLen = steps[i].polyline.split(';');
for (var j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen[j].split(',')[0]),
latitude: parseFloat(poLen[j].split(',')[1])
});
}
}
}
// 线的样式：组成点，颜⾊，宽度
_that.polyline = [
{
points: points,
color: '#FF701E',
width: 7
}
];
/
/ console.log(_that.polyline)
// if (data.paths[0] && data.paths[0].distance) {
//    that.setData({
//        distance: data.paths[0].distance + '⽶'
//    });
// }
// if (data.taxi_cost) {
//    that.setData({
//        cost: '打车约' + parseInt(data.taxi_cost) + '元'
//    });
// }
},
fail: err => {
// console.log(err);
// console.log('⾼德获取路线');
}
});
},
  第⼆种：腾讯地图
1// 腾讯地图获取路线
2        getTXDirection() {
3            let _that = this,
4                origins = _that.markers[0].latitude + ',' + _that.markers[0].longitude,
5                destination = _that.markers[1].latitude + ',' + _that.markers[1].longitude; 6this.qqMap.direction({
7                from: origins,
8                to: destination,
9                success: res => {
10// console.log(res);
11var ret = res;
12var coors = utes[0].polyline,
13                        points = [];
14//坐标解压（返回的点串坐标，通过前向差分进⾏压缩）
15var kr = 1000000;
16for (var i = 2; i < coors.length; i++) {
17                        coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
18                    }
19//将解压后的坐标放⼊点串数组points中
20for (var i = 0; i < coors.length; i += 2) {
21                        points.push({ latitude: coors[i], longitude: coors[i + 1] });
23                    let distance = utes[0].distance;
24// 这个缩放问题我处理不了，头⼤
25if (distance > 500000) {
26this.scale = 3;
27                    } else if (distance > 100000) {
28this.scale = 7;
29                    } else if (distance > 10000) {
30this.scale = 9;
31                    } else if (distance > 1000) {
32this.scale = 14;
33                    }
34                    _that.polyline = [
35                        {
36                            points: points,
37                            color: '#FF701E',
38                            width: 7
39                        }
40                    ];
41// console.log(_that.polyline)
42                },
43                fail: err => {
44// console.log(err);
45                }
46            });
47        },
  以上就是我接触地图的全部内容了，唉，磕磕绊绊的总算搞完了，⼼累，什么时候我才能变强啊~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。