123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225 |
- <template>
- <view class="map-container">
- <map
- id="map"
- :latitude="latitude"
- :longitude="longitude"
- scale="12"
- show-compass
- show-location
- :markers="markers"
- :polyline="polyline"
- @markertap="markertap"
- style="width: 100%; height:100%;">
- </map>
- </view>
- </template>
- <script>
- import { getCleanWay } from '@/api/unclear.js'
- var QQMapWX = require('@/libs/qqmap-wx-jssdk.min.js')
- var qqmapsdk
- export default{
- data(){
- return{
- latitude: null, // 纬度
- longitude: null, // 经度
- markers: [], // 所有网点标注点
- distanceMark: [], // 按距离计算远近后的网点标注点
- polyline: null, // 路线
- }
- },
- onLoad() {
- // 实例化API核心类
- qqmapsdk = new QQMapWX({
- key: 'FRCBZ-IDZWW-FGDRR-O3SQM-ZW5C2-LRBDM'
- })
- },
- onShow() {
- this.getLocation()
- },
- methods: {
- // 获取当前位置
- getLocation(){
- const _this = this
- uni.getLocation({
- type: 'gcj02',
- success: function (res) {
- _this.latitude = res.latitude // 纬度
- _this.longitude = res.longitude // 经度
- _this.getCleanWay() // 获取个人待清运清单
- }
- })
- },
- // 标注点信息
- getCleanWay(){
- getCleanWay({ lng: this.longitude, lat: this.latitude }).then(res => {
- if(res.status == 200){
- this.markers = []
- res.data.map((item, index) => {
- if(item.lat && item.lng){ // 经纬度为空的错误数据,网点信息不在地图上显示
- this.markers.push({
- id: index+1,
- latitude: item.lat,
- longitude: item.lng,
- width: '60rpx',
- height: '60rpx',
- iconPath: '/static/store.png',
- label: {
- content: item.stationName || '--',
- bgColor: '#fff',
- }
- })
- }
- })
- if(this.markers.length>0){
- this.onCalculateDistance() // 计算距离
- }
- }
- })
- },
- // 将所有标注点与当前位置进行距离计算
- onCalculateDistance(){
- const _this = this
- const startPos = { latitude: _this.latitude, longitude: _this.longitude }
- let destPos = []
- _this.markers.map(item => {
- destPos.push({ latitude: item.latitude, longitude: item.longitude })
- })
- //调用距离计算接口
- qqmapsdk.calculateDistance({
- mode: 'driving', //可选值:'driving'(驾车)、'walking'(步行),不填默认:'walking',可不填
- //from参数不填默认当前地址
- //获取表单提交的经纬度并设置from和to参数(示例为string格式)
- from: startPos, //若起点有数据则采用起点坐标,若为空默认当前地址
- to: destPos, //终点坐标
- success: function(res) {//成功后的回调
- var res = res.result
- _this.distanceMark = []
- for (var i = 0; i < res.elements.length; i++) {
- // 将距离值加入标注点信息中
- _this.distanceMark.push({
- latitude: res.elements[i].to.lat,
- longitude: res.elements[i].to.lng,
- distance: res.elements[i].distance
- })
- }
- // 数组升序排序
- _this.distanceMark.sort(_this.compare( 'distance', true ))
- _this.onDirection() // 路线规划
- },
- fail: function(error) {
- console.error(error)
- },
- complete: function(res) {
- // console.log(res)
- }
- })
- },
- // 数组排序
- compare(property, desc){
- return function (a, b) {
- var value1 = a[property]
- var value2 = b[property]
- if(desc==true){ // 升序排列
- return value1 - value2
- }else{ // 降序排列
- return value2 - value1
- }
- }
- },
- // 路线规划
- onDirection(){
- const _this = this
- _this.polyline = []
- // 将所有标注点都按距离进行路线规划
- var position = null
- position = [
- { latitude: _this.latitude, longitude: _this.longitude },
- { latitude: _this.distanceMark[0].latitude, longitude: _this.distanceMark[0].longitude }
- ]
- _this.getDirection(position, 0)
- },
- // 路线规划
- getDirection(position, ind){
- const _this = this
- qqmapsdk.direction({
- mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
- //from参数不填默认当前地址
- from: {
- latitude: position[0].latitude,
- longitude: position[0].longitude
- },
- to: {
- latitude: position[1].latitude,
- longitude: position[1].longitude
- },
- policy: 'LEAST_TIME,NAV_POINT_FIRST',
- success: function (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] })
- }
- //设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
- _this.polyline.push({
- points: pl,
- arrowLine: true,
- width: 8,
- color: '#07c160'
- })
- },
- fail: function (error) {
- console.error(error)
- },
- complete: function (res) {
- // 腾讯地图使用限制
- // 为了保证我们的服务稳定,我们对每个key的每个服务接口的调用量做了如下限制:
- // 日调用量:1万次 / Key
- // 并发数:5次 / key / 秒
-
- // 递归调用避免并发限制
- if(ind < _this.distanceMark.length-1){
- let pos = [
- { latitude: _this.distanceMark[ind].latitude, longitude: _this.distanceMark[ind].longitude },
- { latitude: _this.distanceMark[ind+1].latitude, longitude: _this.distanceMark[ind+1].longitude }
- ]
- let subInd = ind
- subInd++
- setTimeout(()=>{
- _this.getDirection(pos, subInd)
- },300)
- }
- }
- })
- },
- // 点击标注点,调用第三方地图查看规划路线
- markertap(e){
- this.markers.map(item => {
- if(item.id == e.detail.markerId){
- uni.openLocation({
- latitude: item.latitude,
- longitude: item.longitude,
- success: function () {
-
- }
- })
- }
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .map-container {
- width: 100%;
- height: 100vh;
- }
- </style>
|