|
|
@@ -0,0 +1,205 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <map style="width: 100%; height: 100vh;" :show-location='true' ref="map" id="map" :latitude="latitude"
|
|
|
+ :longitude="longitude" :markers="marker" :scale="scale" :polyline="polyline" @callouttap='toDL(dataObj)'>
|
|
|
+ <cover-view slot="callout">
|
|
|
+ <block v-for="(item,index) in marker" :key="index">
|
|
|
+ <cover-view class="customCallout" :marker-id="item.id">
|
|
|
+ <cover-view class="content row1" style="margin-top: 0;">
|
|
|
+ {{dataObj.shopNames}}
|
|
|
+ </cover-view>
|
|
|
+ <cover-view class="content row2">
|
|
|
+ 距离{{(info.distance/1000).toFixed(1)}}公里
|
|
|
+ </cover-view>
|
|
|
+ <cover-view class="content row3">
|
|
|
+ 驾车约{{(info.duration/60).toFixed(0)}}分钟
|
|
|
+ </cover-view>
|
|
|
+ <cover-view class="dh" >
|
|
|
+ 导航
|
|
|
+ </cover-view>
|
|
|
+ </cover-view>
|
|
|
+ </block>
|
|
|
+ </cover-view>
|
|
|
+
|
|
|
+ <!-- <view class="to-here">
|
|
|
+ <image src="../../static/image/to.png" mode="widthFix" style="width: 36rpx;">
|
|
|
+ </image>
|
|
|
+ </view> -->
|
|
|
+ </map>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ var that;
|
|
|
+ var GDMapWX = require('@/js_sdk/js-amap/amap-wx.130.js');
|
|
|
+ import {
|
|
|
+ authorizedLocation
|
|
|
+ } from '@/util/util.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ polyline: [],
|
|
|
+ dataObj: {},
|
|
|
+ latitude: '', //纬度
|
|
|
+ longitude: '', //经度
|
|
|
+ marker: [],
|
|
|
+ scale: 14, //缩放级别
|
|
|
+ info: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ that = this
|
|
|
+ this.isdingwei()
|
|
|
+ this.dataObj = JSON.parse(options.val)
|
|
|
+ console.log(this.dataObj)
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getInfo(_origin, _destination) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ var amapPluginInstance = new GDMapWX.AMapWX({
|
|
|
+ key: '6bafe91754a563ff2b7c02542c1ef4e8'
|
|
|
+ });
|
|
|
+ amapPluginInstance.getDrivingRoute({
|
|
|
+ origin: _origin,
|
|
|
+ destination: _destination,
|
|
|
+ success: function(res) {
|
|
|
+ console.log(res)
|
|
|
+ resolve(res)
|
|
|
+ // let _content = that.dataObj.shopNames+'\n'+"距离约"+1+'公里'+'\n'+'驾车约'+4+"分钟"
|
|
|
+ // console.log(_content)
|
|
|
+ // that.marker[0].callout = { //气泡窗口
|
|
|
+ // content: that.dataObj.shopNames+'\n'+"距离约"+1+'公里'+'\n'+'驾车约'+4+"分钟", //文本
|
|
|
+ // // color: '#ffffff',
|
|
|
+ // fontSize: 14,
|
|
|
+ // borderRadius: 15,
|
|
|
+ // padding: '10',
|
|
|
+ // bgColor: '#fff',
|
|
|
+ // display: 'ALWAYS', //常显
|
|
|
+ // }
|
|
|
+
|
|
|
+ //成功回调
|
|
|
+ },
|
|
|
+ fail: function(info) {
|
|
|
+ //失败回调
|
|
|
+ console.log(info)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toDL(val) {
|
|
|
+ console.log(val)
|
|
|
+ let _latitude = val.location.split(",")[0]
|
|
|
+ let _longitude = val.location.split(",")[1]
|
|
|
+ uni.openLocation({
|
|
|
+ latitude: Number(_latitude),
|
|
|
+ longitude: Number(_longitude),
|
|
|
+ success: function() {
|
|
|
+ console.log('success');
|
|
|
+ },
|
|
|
+ fail(fail) {
|
|
|
+ console.log(fail)
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ isdingwei() {
|
|
|
+ authorizedLocation().then(async res => {
|
|
|
+ let _obj = {}
|
|
|
+ if (res == '取消授权') {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ _obj = {
|
|
|
+ latitude: res.latitude,
|
|
|
+ longitude: res.longitude
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.longitude = _obj.longitude
|
|
|
+ this.latitude = _obj.latitude
|
|
|
+ let _origin = this.longitude + ',' + this.latitude
|
|
|
+ let _destination = this.dataObj.location.split(",")[1] + "," + this.dataObj.location.split(
|
|
|
+ ",")[0]
|
|
|
+ let _info = await this.getInfo(_origin, _destination)
|
|
|
+ this.info = _info.paths[0]
|
|
|
+ this.marker[0] = {
|
|
|
+ id: Number(this.dataObj.id),
|
|
|
+ iconPath: '/static/image/food/location.png', //显示的图标
|
|
|
+ latitude: Number(this.dataObj.latitude),
|
|
|
+ longitude: Number(this.dataObj.longitude),
|
|
|
+ width: 20,
|
|
|
+ height: 20,
|
|
|
+
|
|
|
+ customCallout: {
|
|
|
+ // content: that.dataObj.shopNames + '\n' + "距离约" + 1 + '公里' + '\n' + '驾车约' + 4 +
|
|
|
+ // "分钟", //文本
|
|
|
+ // // color: '#ffffff',
|
|
|
+ // fontSize: 14,
|
|
|
+ // borderRadius: 15,
|
|
|
+ // padding: '10',
|
|
|
+ // bgColor: '#fff',
|
|
|
+ display: 'ALWAYS', //常显
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let _polylineList = []
|
|
|
+ for (let i = 0; i < this.info.steps.length; i++) {
|
|
|
+ let _polyline = this.info.steps[i].polyline.split(";")
|
|
|
+ for (let j = 0; j < _polyline.length; j++) {
|
|
|
+ let _obj = {
|
|
|
+ latitude: _polyline[j].split(",")[1],
|
|
|
+ longitude: _polyline[j].split(",")[0]
|
|
|
+ }
|
|
|
+ _polylineList.push(_obj)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ this.polyline = [{
|
|
|
+ points: _polylineList,
|
|
|
+ color: "#31c27c",
|
|
|
+ width: 5,
|
|
|
+ arrowLine: true,
|
|
|
+ // borderWidth: 2 //线的边框宽度，还有很多参数，请看文档
|
|
|
+ }]
|
|
|
+ this.$forceUpdate()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .customCallout {
|
|
|
+ width: 400rpx;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row1 {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row2,
|
|
|
+ .row3 {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dh {
|
|
|
+ font-size: 24rpx;
|
|
|
+ background: #eaad1a;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ right: 20rpx;
|
|
|
+ bottom: 20rpx;
|
|
|
+ color: #fff;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
高敬炎