308 lines
7.6 KiB
Vue
308 lines
7.6 KiB
Vue
<template>
|
||
<div class="app-content">
|
||
<el-input
|
||
v-model="addressLocation"
|
||
@input="searchValue"
|
||
v-if="showInput"
|
||
:placeholder="placeholder || '如：北京市延庆区延庆镇莲花池村前街50夕阳红养老院'"
|
||
></el-input>
|
||
<div class="mapDiv" id="mapDiv" ref="mapDiv" style="width: 100%;height: 300px;"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {debounce} from '@/util/util';
|
||
|
||
let origin = ''
|
||
if (window.location.origin.search('localhost') > 0) {
|
||
origin = 'http://10.165.0.173'
|
||
} else {
|
||
origin = window.location.origin
|
||
}
|
||
loadJS()
|
||
|
||
function loadJS() {
|
||
const script = document.createElement('script')
|
||
script.type = 'text/javascript';
|
||
script.src = origin + '/tianditu/api?v=4.0&tk=' + process.env.VUE_APP_TIANDITU_APIKEY
|
||
script.onload = function () {
|
||
T.Protocol.value = origin + '/'
|
||
console.warn('-----------天地图加载完成-----------')
|
||
};
|
||
document.head.appendChild(script);
|
||
}
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
options: [],
|
||
addressLocation: '',
|
||
baseUrl: '',
|
||
isInput: true,
|
||
Tmap: null,
|
||
}
|
||
},
|
||
props: {
|
||
placeholder: String,
|
||
latitude: {
|
||
required: false,
|
||
// default: 31.126855,
|
||
},
|
||
longitude: {
|
||
required: false,
|
||
// default: 104.397894,
|
||
},
|
||
zoom: {
|
||
type: Number,
|
||
required: false,
|
||
default: 10,
|
||
},
|
||
maxZoom: {
|
||
type: Number,
|
||
required: false,
|
||
default: 20,
|
||
},
|
||
minZoom: {
|
||
type: Number,
|
||
required: false,
|
||
default: 0,
|
||
},
|
||
ScaleZoom: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: false,
|
||
},
|
||
MapUrl: { // 瓦片地图URL
|
||
type: String,
|
||
required: false,
|
||
default: process.env.VUE_APP_SUPPER_MAP,
|
||
},
|
||
flagTip: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: false,
|
||
},
|
||
open: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: false,
|
||
},
|
||
isCanEdit: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: false,
|
||
},
|
||
address: {
|
||
required: false,
|
||
default: '',
|
||
},
|
||
type: {
|
||
required: false,
|
||
default: 'custom',
|
||
}
|
||
},
|
||
computed: {
|
||
showInput() {
|
||
if (this.type === 'view' || this.type === 'select') {
|
||
return false
|
||
}
|
||
if (this.type === 'add') {
|
||
this.addressLocation = ''
|
||
}
|
||
return true
|
||
}
|
||
},
|
||
watch: {
|
||
address() {
|
||
if (!this.isInput) return;
|
||
console.log(2, this.type, this.address, this.longitude, this.latitude)
|
||
if (this.longitude > 0 && this.latitude > 0) {
|
||
this.addressLocation = this.address
|
||
this.createTmap(this.longitude, this.latitude)
|
||
} else {
|
||
this.getlocation()
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
console.log(1, this.type, this.address, this.longitude, this.latitude)
|
||
this.baseUrl = origin;
|
||
T.Protocol.value = this.baseUrl + '/'
|
||
},
|
||
mounted() {
|
||
if (this.longitude > 0 && this.latitude > 0) {
|
||
this.addressLocation = this.address
|
||
this.createTmap(this.longitude, this.latitude)
|
||
} else {
|
||
this.getlocation()
|
||
}
|
||
},
|
||
methods: {
|
||
geolocation() {
|
||
},
|
||
getlocation() {
|
||
const _this = this
|
||
// 31.12494749933168, 经度： 104.40371173671055
|
||
// 内网环境无法获取位置
|
||
_this.createTmap(104.40371173671055, 31.12494749933168)
|
||
// if (navigator.geolocation) {
|
||
// navigator.geolocation.getCurrentPosition(function (position) {
|
||
// let latitude = position.coords.latitude;
|
||
// let longitude = position.coords.longitude;
|
||
// _this.createTmap(longitude, latitude)
|
||
// }, function (error) {
|
||
//
|
||
// // _this.$message.info('无法获取地理位置，请授权页面定位权限')
|
||
// console.warn('无法获取地理位置，请授权页面定位权限' + error)
|
||
// });
|
||
// } else {
|
||
// _this.$message.info('浏览器不支持地理定位')
|
||
// }
|
||
},
|
||
searchValue: debounce(function (val) {
|
||
if (!this.isInput) {
|
||
this.isInput = true
|
||
return
|
||
}
|
||
if (this.type !== 'view') {
|
||
this.$emit('input', val)
|
||
}
|
||
let params = {
|
||
ds: {
|
||
keyWord: val,
|
||
},
|
||
tk: process.env.VUE_APP_TIANDITU_APIKEY
|
||
}
|
||
const _this = this
|
||
axios({
|
||
method: 'get',
|
||
url: this.baseUrl + '/tianditu/geocoder',
|
||
params: params,
|
||
}).then(({data}) => {
|
||
if (data.status === '0') {
|
||
const {keyWord, lon, lat, level} = data.location
|
||
if (!this.Tmap) {
|
||
this.createTmap(lon, lat)
|
||
} else {
|
||
this.Tmap.centerAndZoom(new T.LngLat(lon, lat), 15);
|
||
this.setIcon(lon, lat);
|
||
this.$emit('addAddress', {
|
||
address: this.addressLocation,
|
||
lng: lon,
|
||
lat: lat
|
||
})
|
||
}
|
||
}
|
||
}).catch((err) => {
|
||
_this.$message.info('无法获取该位置地理坐标')
|
||
})
|
||
}, 1000),
|
||
createTmap(lng, lat) {
|
||
const _this = this
|
||
this.$nextTick(() => {
|
||
if (!this.Tmap) {
|
||
this.Tmap = new T.Map(this.$refs.mapDiv, {
|
||
projection: 'EPSG:4326',
|
||
minZoom: this.minZoom,
|
||
maxZoom: this.maxZoom
|
||
});
|
||
this.Tmap.addEventListener('click', (e) => {
|
||
_this.nextPoint(e.lnglat)
|
||
});
|
||
}
|
||
console.log(this.Tmap)
|
||
this.Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
|
||
this.setIcon(lng, lat);
|
||
})
|
||
},
|
||
setIcon(lng, lat) {
|
||
this.Tmap.clearOverLays()
|
||
const icon = new T.Icon({
|
||
iconUrl: '/img/point.png',
|
||
iconSize: new T.Point(30, 30),
|
||
iconAnchor: new T.Point(15, 30)
|
||
});
|
||
const marker = new T.Marker(new T.LngLat(lng, lat), {
|
||
icon
|
||
});
|
||
this.Tmap.addOverLay(marker);
|
||
},
|
||
nextPoint(lnglat) {
|
||
var that = this;
|
||
let params = {
|
||
postStr: JSON.stringify({
|
||
lon: lnglat.lng,
|
||
lat: lnglat.lat,
|
||
ver: 1,
|
||
}),
|
||
type: 'geocode',
|
||
tk: process.env.VUE_APP_TIANDITU_APIKEY
|
||
}
|
||
axios({
|
||
method: 'get',
|
||
url: this.baseUrl + '/tianditu/geocoder',
|
||
params: params,
|
||
}).then((res) => {
|
||
if (res.data.status === '0') {
|
||
that.setIcon(lnglat.lng, lnglat.lat)
|
||
const info = that.formatterAdressLocation(res.data.result, 1)
|
||
this.isInput = false
|
||
this.$emit('addAddress', {
|
||
address: info.address,
|
||
lng: info.location.lon,
|
||
lat: info.location.lat
|
||
})
|
||
this.addressLocation = info.address
|
||
this.$nextTick(() => {
|
||
this.isInput = true
|
||
})
|
||
}
|
||
})
|
||
},
|
||
formatterAdressLocation(obj, type) {
|
||
switch (type) {
|
||
case 1:
|
||
return {
|
||
address: obj.formatted_address,
|
||
name: '',
|
||
location: obj.location,
|
||
infomation: obj.addressComponent
|
||
}
|
||
break;
|
||
case 2:
|
||
const [lon, lat] = obj.lonlat.split(',')
|
||
return {
|
||
address: obj.address,
|
||
name: obj.name,
|
||
location: {
|
||
lon,
|
||
lat
|
||
},
|
||
infomation: obj
|
||
}
|
||
break
|
||
case 3:
|
||
return {
|
||
address: obj.location.keyWord,
|
||
name: '',
|
||
location: {
|
||
lon: obj.location.lon,
|
||
lat: obj.location.lat,
|
||
},
|
||
infomation: obj.location
|
||
}
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.mapDiv {
|
||
width: 100%;
|
||
height: fit-content;
|
||
}
|
||
</style>
|