<template>
<view>
<button @click="formSubmit">规划路线</button>
<!-- <page-head :title="title"></page-head> -->
<view class="uni-common-mt">
<view>
<map id="myMap" scale='16' show-location :polyline="polyline" :longitude='longitude'
:latitude='latitude'>
</map>
<!--输入起点和目的地经纬度坐标,格式为string格式-->
<!--起点输入框,同终点,不填默认当前位置-->
<!-- <label>起点坐标:<input style="border:1px solid #000;" @blur="startInput"></input></label> -->
<!--终点输入框,例:39.984060,116.307520-->
<!-- <label>终点坐标:<input style="border:1px solid #000;" @blur="endInput"></input></label> -->
<!--提交表单数据-->
<!-- <button @click="formSubmit">路线规划</button> -->
</view>
</view>
</view>
</template>
<script>
import QQMapWX from 'static/js/qqmap-wx-jssdk.min.js';
import {
wgs84_to_gcj02
} from "static/js/wgs84_to_gcj02.js"
import {
VueJsonp
} from 'vue-jsonp'
export default {
data() {
return {
start: '',
dest: '',
qqmapsdk: '',
polyline: '',
longitude: 113.324520,
latitude: 23.099994,
}
},
methods: {
startInput(e) {
console.log(e.detail);
this.start = e.detail.value
},
endInput(e) {
this.dest = e.detail.value
},
formSubmit(e) { //https://apis.map.qq.com/tools/routeplan
let url = 'https://apis.map.qq.com/ws/direction/v1/driving';
this.$jsonp(url, {
key: '64EBZ-RGCWQ-HJ45U-BF4AX-P7LWO-LMFVS',
from: '29.984060,116.307520',
to: '39.984060,116.307420',
output: 'jsonp'
}).then(res => {
var ret = res;
var coors = ret.result.routes[0].polyline,
pl = [];
//坐标解压(返回的点串坐标,通过前向差分进行压缩)
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
//将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
pl.push({
latitude: coors[i],
longitude: coors[i + 1]
})
}
//转坐标系
// let tmep= wgs84_to_gcj02(Number(longitude),Number(latitude))
console.log(pl)
//设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
this.latitude = pl[0].latitude,
this.longitude = pl[0].longitude,
this.polyline = [{
points: pl,
color: '#FF0000DD',
width: 4
}]
})
}
}
}
</script>
<style>
map {
width: 100%;
height: 60vh;
}
</style>
引入qqmap-wx-jssdk.min.js在腾讯地图官网下载
vue-jsonp解决地图跨域问题