123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- <!-- 地图盒子组件 -->
- <template name="mapBox">
- <view @click="toLocation()" :style="'background-image:url( '+serverUrlImg+' )'" class="box">
- <view style="background-color: white;padding-bottom: 20upx;" class="main_width">
- <view style="width: 92%;margin-left: 4%;">
- <view class="addr_box">
- <image style="width:20upx;height: 32upx;" :src="position_greenImg"></image>
- <view style="width: 620upx;margin-left: 15upx;">{{data.work_addr}}</view>
- </view>
- <view style="display: flex;flex-direction: row;justify-content: space-between;">
- <view>
- <view class="map_item">
- <image style="width: 20upx;height: 30upx;margin-right: 20upx;" src="../../static/walk.png">
- </image>
- 步行{{time1}}分钟
- </view>
- <view class="map_item">
- <image style="width: 29upx;height: 27upx;margin-right: 15upx;" src="/static/bicycle.png">
- </image>骑行{{time2}}分钟
- </view>
- </view>
- <view style="color: #00d29e;font-weight: bold;">距我{{distance}}km ></view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import commonData from '../../commonData.js'
- import commonFun from '../../commonFun.js'
- export default {
- name: "mapBox",
- data() {
- return {
- serverUrlImg: this.serverUrl + 'map.png',
- position_greenImg: this.serverUrl + 'position_green.png',
- data: {},
- distance: '--',
- time1: '--',
- time2: '--',
- };
- },
- props: {
- dataSource: {}
- },
- methods: {
- //进入地图
- toLocation() {
- console.log('地图页面地址信息')
- console.log(this.data)
- uni.openLocation({
- name: this.data.work_addr1 || '',
- address: this.data.work_addr,
- latitude: Number(this.data.work_addr_lat),
- longitude: Number(this.data.work_addr_lng),
- success: function() {
- console.log('success');
- }
- });
- },
- },
- created() {
- this.data = this.dataSource
- commonFun.getPositionLocal(res => {
- console.log('首页获取位置')
- console.log(res)
- this.distance = (Math.sqrt(Math.pow((Number(this.data.work_addr_lat)) - res.latitude, 2) + Math
- .pow(
- (Number(this
- .data.work_addr_lng)) - res.longitude, 2)) * 80).toFixed(1)
- // console.log('计算距离')
- // console.log(Number(this.data.work_addr_lat), res.latitude)
- // console.log(Number(this.data.work_addr_lng), res.longitude)
- // console.log(this.distance)
- this.time1 = (this.distance * 60 / 5).toFixed(1)
- this.time2 = (this.distance * 60 / 15).toFixed(1)
- })
- }
- }
- </script>
- <style>
- .addr_box{
- line-height: 45upx;font-size: 28upx;padding: 10upx 0;display: flex;align-items: center;
- }
- .box {
- width: 100%;
- height: 290upx;
- background-size: 100% 100%;
- display: flex;
- align-items: center;
- }
- .map_item {
- line-height: 60upx;
- color: #666666;
- }
- </style>
|