174 lines
4.3 KiB
Vue
174 lines
4.3 KiB
Vue
<template>
|
|
<el-dialog
|
|
title="获取经纬度"
|
|
:visible.sync="centerDialogVisible"
|
|
width="600px"
|
|
center
|
|
:append-to-body="true"
|
|
>
|
|
<div class="dialog-inner">
|
|
<div class="map-search">
|
|
<el-input placeholder="输入地址" v-model="address"></el-input>
|
|
<lb-button size="mini" type="primary" @click="searchMapAddr"
|
|
>搜 索</lb-button
|
|
>
|
|
</div>
|
|
<div id="container"></div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="centerDialogVisible = false">{{
|
|
$t('action.cancel')
|
|
}}</el-button>
|
|
<el-button type="primary" @click="confirmLatLng">{{
|
|
$t('action.comfirm')
|
|
}}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
dialogVisible: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
centerDialogVisible: false,
|
|
map: null,
|
|
info: null,
|
|
address: '',
|
|
marker: '',
|
|
geocoder: null,
|
|
latLng: {
|
|
lat: 30.657535,
|
|
lng: 104.065783
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
initMap () {
|
|
let that = this
|
|
let { lat, lng } = this.latLng
|
|
// 中心坐标
|
|
// eslint-disable-next-line no-undef
|
|
let center = new qq.maps.LatLng(lat, lng)
|
|
// eslint-disable-next-line no-undef
|
|
let map = new qq.maps.Map(
|
|
document.getElementById('container'),
|
|
{
|
|
center: center,
|
|
zoom: 12
|
|
}
|
|
)
|
|
that.map = map
|
|
// eslint-disable-next-line no-undef
|
|
that.info = new qq.maps.InfoWindow({
|
|
map: map
|
|
})
|
|
// eslint-disable-next-line no-undef
|
|
qq.maps.event.addListener(map, 'click', async function (val, el) {
|
|
if (that.marker) { that.marker.setMap(null) }
|
|
let { lat, lng } = val.latLng
|
|
that.latLng = val.latLng
|
|
// eslint-disable-next-line no-undef
|
|
that.marker = new qq.maps.Marker({
|
|
// 标记的位置
|
|
// eslint-disable-next-line no-undef
|
|
position: new qq.maps.LatLng(lat, lng),
|
|
map: map
|
|
})
|
|
that.info.open()
|
|
that.info.setContent(`<div style="margin:10px;">
|
|
<p>纬度：${lat}</p>
|
|
<p>经度：${lng}</p>
|
|
</div>`)
|
|
// eslint-disable-next-line no-undef
|
|
that.info.setPosition(new qq.maps.LatLng(lat, lng))
|
|
})
|
|
},
|
|
openQQMap () {
|
|
setTimeout(() => {
|
|
this.initMap()
|
|
this.initGeocoder()
|
|
}, 500)
|
|
},
|
|
/**
|
|
* @method 根据位置搜索坐标
|
|
*/
|
|
searchMapAddr () {
|
|
let { address } = this
|
|
this.geocoder.getLocation(address)
|
|
},
|
|
initGeocoder () {
|
|
let that = this
|
|
// eslint-disable-next-line no-undef
|
|
that.geocoder = new qq.maps.Geocoder()
|
|
// 设置服务请求成功的回调函数
|
|
that.geocoder.setComplete(function (result) {
|
|
let { lat, lng } = result.detail.location
|
|
that.latLng = result.detail.location
|
|
that.map.setCenter(result.detail.location)
|
|
// eslint-disable-next-line no-undef
|
|
that.marker = new qq.maps.Marker({
|
|
map: that.map,
|
|
position: result.detail.location
|
|
})
|
|
that.info.open()
|
|
that.info.setContent(`<div style="margin:10px;">
|
|
<p>纬度：${lat}</p>
|
|
<p>经度：${lng}</p>
|
|
</div>`)
|
|
// eslint-disable-next-line no-undef
|
|
that.info.setPosition(new qq.maps.LatLng(lat, lng))
|
|
})
|
|
// 若服务请求失败，则运行以下函数
|
|
that.geocoder.setError(function () {
|
|
that.$message.error('请输入包含市级的地址！')
|
|
})
|
|
},
|
|
/**
|
|
* @method 确定经纬度
|
|
*/
|
|
confirmLatLng () {
|
|
this.centerDialogVisible = false
|
|
this.$emit('selectedLatLng', this.latLng)
|
|
}
|
|
},
|
|
watch: {
|
|
dialogVisible (newValue, oldValue) {
|
|
if (newValue) {
|
|
this.centerDialogVisible = true
|
|
this.openQQMap()
|
|
}
|
|
},
|
|
centerDialogVisible (val) {
|
|
if (!val) {
|
|
this.$emit('update:dialogVisible', false)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#container {
|
|
width: 500px;
|
|
height: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
.dialog-inner {
|
|
.map-search {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
.el-input {
|
|
width: 300px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|