229 lines
9.5 KiB
Vue
229 lines
9.5 KiB
Vue
<template>
|
||
<view>
|
||
<input type="hidden" v-if="name=='loc'" name="lng" :value="tvalue.lng" style="display:none;" />
|
||
<input type="hidden" v-else :name="name+'_lng'" :value="tvalue.lng" style="display:none;" />
|
||
<input type="hidden" v-if="name=='loc'" name="lat" :value="tvalue.lat" style="display:none;" />
|
||
<input type="hidden" v-else :name="name+'_lat'" :value="tvalue.lat" style="display:none;" />
|
||
<template v-if="hasmore">
|
||
<input type="hidden" :name="name+'_name'" :value="loc.name" style="display:none;" />
|
||
<input type="hidden" :name="name+'_addr'" :value="loc.addr" style="display:none;" />
|
||
<input type="hidden" :name="name+'_latlng'" :value="tvalue.lat+','+tvalue.lng" style="display:none;" />
|
||
</template>
|
||
<view style="display:flex;align-items: center;">
|
||
<template v-if="left">
|
||
<view class="_btn" :class="{_disabled:disabled}" @tap="map_select">
|
||
<view class="_icon _mapicon"></view>
|
||
</view>
|
||
<slot name="show" :data="{value:tvalue, loc:loc, bet:innerbet}">
|
||
<view style="line-height:1.5em;font-size:0.9em;flex: 1; margin-left:0.5em;text-align:left;">
|
||
<view v-if="loc.name || loc.addr">{{loc.name}}<br />{{loc.addr}}</view>
|
||
<view v-else-if="tvalue.lat == 0" style="padding-top:0.3em;display:inline-block;">{{lang('selmap.select')}}</view>
|
||
<view v-else style="padding-top:0.3em;display:inline-block;">{{lang('selmap.loced')}}</view>
|
||
</view>
|
||
</slot>
|
||
</template>
|
||
<template v-else>
|
||
<slot name="show" :data="{value:tvalue, loc:loc, bet:innerbet}">
|
||
<view style="line-height:1.5em;font-size:0.9em;flex: 1; margin-right:0.5em;">
|
||
<view v-if="loc.name || loc.addr">{{loc.name}}<br />{{loc.addr}}</view>
|
||
<view v-else-if="tvalue.lat == 0" style="padding-top:0.3em;display:inline-block;">{{lang('selmap.select')}}</view>
|
||
<view v-else style="padding-top:0.3em;display:inline-block;">{{lang('selmap.loced')}}</view>
|
||
</view>
|
||
</slot>
|
||
<view class="_btn" :class="{_disabled:disabled}" @tap="map_select">
|
||
<view class="_icon _mapicon"></view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import gcoord from '@/util/gcoord.js'
|
||
export default {
|
||
behaviors: ['uni://form-field-group'],
|
||
emits: ['update:lng', 'update:lat', 'change'],
|
||
props: {
|
||
name: {
|
||
type: String,
|
||
default: 'loc'
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
initevent: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
hasmore: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
left: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
bet: {
|
||
type: [String, Number],
|
||
default: 10000000
|
||
},
|
||
lat: {
|
||
type: [String, Number],
|
||
default: ''
|
||
},
|
||
lng: {
|
||
type: [String, Number],
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
loc: {},
|
||
vlat: null,
|
||
vlng: null
|
||
};
|
||
},
|
||
watch: {
|
||
lat: {
|
||
handler(newD, oldD) {
|
||
if (newD || oldD)
|
||
this.vlat = null;
|
||
},
|
||
immediate: true
|
||
},
|
||
lng: {
|
||
handler(newD, oldD) {
|
||
if (newD || oldD)
|
||
this.vlng = null;
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
computed: {
|
||
tvalue() {
|
||
var ret = {};
|
||
if (this.vlat !== null) {
|
||
ret.lat = this.vlat;
|
||
} else {
|
||
ret.lat = this.tofloat(this.lat);
|
||
}
|
||
if (this.vlng !== null) {
|
||
ret.lng = this.vlng;
|
||
} else {
|
||
ret.lng = this.tofloat(this.lng);
|
||
}
|
||
return ret;
|
||
},
|
||
innerbet() {
|
||
var bet = this.bet;
|
||
if (bet <= 1)
|
||
return 1;
|
||
return this.toint(bet);
|
||
}
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
async map_select(e) {
|
||
if (this.disabled)
|
||
return;
|
||
var result;
|
||
if (this.toint(this.lat) == 0) {
|
||
result = this.getstorage('_map');
|
||
if (!result || result.length != 2) {
|
||
result = [1164000000, 398000000];
|
||
} else {
|
||
result[0] += 50000 * Math.random();
|
||
result[1] += 50000 * Math.random();
|
||
}
|
||
} else {
|
||
result = gcoord.transform([this.lng / this.innerbet, this.lat / this.innerbet], gcoord.WGS84, gcoord.GCJ02);
|
||
result[0] = this.caldectoint(result[0]);
|
||
result[1] = this.caldectoint(result[1]);
|
||
}
|
||
try {
|
||
var retchoose = await uni.chooseLocation({
|
||
longitude: result[0] / this.innerbet,
|
||
latitude: result[1] / this.innerbet
|
||
});
|
||
} catch (res) {
|
||
if (res.errMsg.indexOf('cancel') > -1)
|
||
return;
|
||
this.alert(res.errMsg);
|
||
return;
|
||
}
|
||
if (!retchoose.longitude)
|
||
return this.alert(this.lang('selmap.noselect'));
|
||
var result = gcoord.transform([retchoose.longitude, retchoose.latitude], gcoord.GCJ02, gcoord.WGS84);
|
||
result[0] = this.caldectoint(result[0]);
|
||
result[1] = this.caldectoint(result[1]);
|
||
this.setstorage('_map', result);
|
||
this.loc.name = retchoose.name;
|
||
this.loc.addr = retchoose.address;
|
||
this.loc.distance = retchoose.distance;
|
||
this.$emit('update:lng', result[0]);
|
||
this.$emit('update:lat', result[1]);
|
||
this.vlat = result[1];
|
||
this.vlng = result[0];
|
||
this.$emit('change', {
|
||
name: this.name,
|
||
from: 'choose',
|
||
value: {
|
||
...this.loc
|
||
},
|
||
lng: result[0],
|
||
lat: result[1]
|
||
});
|
||
|
||
//gcj02
|
||
// gcoord.WGS84 [lng,lat] WGS-84坐标系，GPS设备获取的经纬度坐标
|
||
// gcoord.GCJ02 [lng,lat] GCJ-02坐标系，google中国地图、soso地图、aliyun地图、mapabc地图和高德地图所用的经纬度坐标
|
||
// gcoord.BD09 [lng,lat] BD-09坐标系，百度地图采用的经纬度坐标
|
||
// gcoord.BD09LL [lng,lat] 同BD09
|
||
// gcoord.BD09MC [x,y] BD-09米制坐标，百度地图采用的米制坐标，单位：米
|
||
// gcoord.BD09Meter [x,y] 同BD09MC
|
||
// gcoord.Baidu [lng,lat] 百度坐标系，BD-09坐标系别名，同BD-09
|
||
// gcoord.BMap [lng,lat] 百度地图，BD-09坐标系别名，同BD-09
|
||
// gcoord.AMap [lng,lat] 高德地图，同GCJ-02
|
||
// gcoord.WebMercator [x,y] Web Mercator投影，墨卡托投影，同EPSG3857，单位：米
|
||
// gcoord.WGS1984 [lng,lat] WGS-84坐标系别名，同WGS-84
|
||
// gcoord.EPSG4326 [lng,lat] WGS-84坐标系别名，同WGS-84
|
||
// gcoord.EPSG3857 [x,y] Web Mercator投影，同WebMercator，单位：米
|
||
// gcoord.EPSG900913 [x,y] Web Mercator投影，同WebMercator，单位：米
|
||
},
|
||
caldectoint(dec) {
|
||
if (this.innerbet <= 1)
|
||
return dec;
|
||
return this.toint(dec * this.innerbet);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
._btn {
|
||
padding: 0.2em;
|
||
width: 2em;
|
||
height: 2em;
|
||
border: 1px solid #cccccc;
|
||
display: inline-block;
|
||
border-radius: 0.3em;
|
||
background: #ffffff;
|
||
}
|
||
|
||
._btn._disabled {
|
||
background: #ebebeb;
|
||
filter: grayscale(0.8);
|
||
}
|
||
|
||
._icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
background-size: cover;
|
||
}
|
||
|
||
._icon._mapicon {
|
||
background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTUxMiA1MTJtLTUxMiAwYTUxMiA1MTIgMCAxIDAgMTAyNCAwIDUxMiA1MTIgMCAxIDAtMTAyNCAwWicgZmlsbD0nIzFFOUZGRic+PC9wYXRoPjxwYXRoIGQ9J002NjguNTQxIDM0NS43MTRjMC05MS41NzktODAuOTIxLTE2My45OS0xNzAuMzc3LTE2My45OS04OS40NSAwLTE2OC4yNDMgNzIuNDA5LTE2OC4yNDMgMTYzLjk4OSAwIDgzLjA1MyAxNjguMjQzIDI4My4yNTggMTY4LjI0MyAyODMuMjU4czE3MC4zNzctMTk1Ljk0MyAxNzAuMzc3LTI4My4yNTd6IG0tMjMyLjEzNSA4LjUyMmMwLTM2LjIxIDI5LjgxLTY2LjAyMiA2My44ODUtNjMuODk3IDM0LjA4OSAwIDYzLjg5OSAyNy42ODcgNjMuODk5IDYzLjg5NyAwLjAwMSAzNC4wNzUtMjcuNjkyIDYzLjg4NS02My44OTkgNjMuODg1LTM0LjA3NSAwLjAwMS02My44ODUtMjcuNjc5LTYzLjg4NS02My44ODV6JyBmaWxsPScjRkZGRkZGJz48L3BhdGg+PHBhdGggZD0nTTUzNi40NjUgNzU4Ljc2bC0yLjA4Ni02LjI2N2MyLjYwMi0wLjk3NyA1LjIwNC0xLjk1NSA3LjgyOC0yLjk1MyAzMi4zMDUtNDcuMjM5IDEwMC4xNDYtNzkuNzc2IDE3OC42MjMtNzkuNzc2IDIuOTM4IDAgNS44NTkgMC4wNTYgOC43NjcgMC4xNDZsLTEuNDIxLTQuNzMyYzIxLjMwMS02LjM5NiA0NC43My04LjUxNiA2Ni4wMjktMTAuNjU1aC0wLjAwMXYyMS4zMTFjLTMuNTA3IDAuMzg4LTcuMDE1IDAuNzc3LTEwLjUzNiAxLjE5MSAxMS44NTUgMi44MjMgMjMuMjEgNi40MjggMzMuOTU0IDEwLjcyMlY1MDEuMTg4YzAtMjMuNDI5LTE5LjE2NS00Mi41OTktNDQuNzE1LTQyLjU5OUg2NjQuMjk0Yy02MS43NjYgMTA4LjYxNi0xNjguMjUyIDIzMi4xNDctMTY4LjI1MiAyMzIuMTQ3UzM5My44MDkgNTY3LjIwNCAzMzQuMTc0IDQ1OC41OWgtODcuMzE4Yy0yMy40MyAwLTQ0LjcxNiAxOS4xNjctNDQuNzE2IDQyLjU5OXYyOTguMTY2YzAgMjMuNDE4IDIxLjI4NiA0Mi41ODYgNDQuNzE2IDQyLjU4NmgyNzkuNjljLTIuOTEtOS42ODEtNC40NTYtMTkuNzIzLTQuNDU2LTMwLjAyMyAwLTE4Ljc5NyA1LjExMS0zNi43MzYgMTQuMzc1LTUzLjE1OHogbS0yNDkuMTQyLTMzLjk0N2MtMTkuMTY3LTguNTI1LTM2LjIwNy0yMS4zMDEtNTUuMzcyLTM0LjA3NWwxMi43NzQtMTcuMDVjMTcuMDM3IDEyLjc4NiAzNi4yMDUgMjMuNDI5IDUzLjI0IDM0LjA3NmwtMTAuNjQyIDE3LjA0OXogbTk3Ljk3MiA0NC43MThjLTE5LjE2Ny04LjUxNi0zOC4zMzQtMTQuOTA3LTU5LjYzNS0yMy40MzRsOC41MTQtMTkuMTY5YzE5LjE2NiA4LjUyNiAzOC4zMzcgMTcuMDU0IDU3LjUwMyAyMS4zMTNsLTYuMzgyIDIxLjI5eiBtNzIuNDExIDEyLjc4NGMtOC41MjQgMC0xNy4wMzctMi4xMzQtMjcuNjkzLTQuMjYzbDQuMjY0LTIxLjI5OGM4LjUyMSAyLjEzIDE5LjE2NyAyLjEzIDI3LjY4MSA0LjI2MSAxMC42NTYgMi4xMzMgMjEuMjk4IDAgMzEuOTU3IDBsMi4xMjkgMjEuM2ExMTYuMzQ1IDExNi4zNDUgMCAwIDEtMzguMzM4IDB6JyBmaWxsPScjRkZGRkZGJz48L3BhdGg+PHBhdGggZD0nTTc3Mi45MDcgODQxLjkzOWMyMy40MTggMCA0NC43MTUtMTkuMTY2IDQ0LjcxNS00Mi41ODdWNjg3Ljc0NGMtMTAuNzQ0LTQuMjk0LTIyLjA5OS03Ljg5Ny0zMy45NTQtMTAuNzIyLTE1LjcxOSAxLjg1My0zMS42OTkgNC4yMjktNDkuMDk5IDkuNDVsLTQuOTc0LTE2LjU2M2EyNzkuOTgxIDI3OS45ODEgMCAwIDAtOC43NjctMC4xNDZjLTc4LjQ3NyAwLTE0Ni4zMTggMzIuNTM3LTE3OC42MjMgNzkuNzc2IDE0LjU2MS01LjU0MSAyOS44MTgtMTEuNzczIDQ5LjY2MS0yMi42MDlsOC41MjUgMTkuMTY5Yy0yMy40MyAxMC42NTctNDIuNTk4IDE5LjE2OS01OS42MzUgMjUuNTZsLTQuMjk1LTEyLjg5OGMtOS4yNjQgMTYuNDIyLTE0LjM3NSAzNC4zNjEtMTQuMzc1IDUzLjE1NiAwIDEwLjMwMiAxLjU0NiAyMC4zNDQgNC40NTYgMzAuMDIzaDI0Ni4zNjV6IG0tODMuMDY0LTE2My45ODZsOC41MjUgMTkuMTY0Yy0xOS4xNjkgOC41MjUtMzYuMjA3IDE3LjA1MS01OS42MzcgMjcuNjk0bC04LjUyMS0xOS4xNjhjMjMuNDMtMTAuNjQyIDQwLjQ2NS0xOS4xNjUgNTkuNjMzLTI3LjY5eicgZmlsbD0nI0ZGRkZGRicgb3BhY2l0eT0nLjQnPjwvcGF0aD48L3N2Zz4=");
|
||
}
|
||
</style> |