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() {
-
- 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',
-
-
- 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) {
-
- }
- })
- },
-
- 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',
-
- 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;
- }
-
- for (var i = 0; i < coors.length; i += 2) {
- pl.push({ latitude: coors[i], longitude: coors[i + 1] })
- }
-
- _this.polyline.push({
- points: pl,
- arrowLine: true,
- width: 8,
- color: '#07c160'
- })
- },
- fail: function (error) {
- console.error(error)
- },
- complete: function (res) {
-
-
-
-
-
-
- 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>
|