Jackwang
4 years ago
4 changed files with 510 additions and 92 deletions
@ -0,0 +1,52 @@ |
|||
<template> |
|||
<el-dialog |
|||
:visible.sync="visible" |
|||
title="地址确认" |
|||
:append-to-body="true" |
|||
:modal-append-to-body="false" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
> |
|||
<el-form :model="dataForm" :label-width="$i18n.locale === 'en-US' ? '180px' : '140px'"> |
|||
<el-form-item label="地址:"> |
|||
<div>{{dataForm.address}}</div> |
|||
</el-form-item> |
|||
<el-form-item label="经度:"> |
|||
<div>{{dataForm.longitude}}</div> |
|||
</el-form-item> |
|||
<el-form-item label="纬度:"> |
|||
<div>{{dataForm.latitude}}</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="checkOk()" type="primary">{{$t("confirm")}}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
address: '', |
|||
longitude: 0,//经度 |
|||
latitude: 0,//纬度 |
|||
city: '' |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init (dataForm) { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.dataForm = dataForm |
|||
}) |
|||
}, |
|||
checkOk () { |
|||
this.$emit('checkOk', true) |
|||
this.visible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,253 @@ |
|||
|
|||
<template> |
|||
<el-dialog :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body> |
|||
<el-form |
|||
:inline="true" |
|||
:model="dataForm" |
|||
:label-width="$i18n.locale === 'en-US' ? '120px' : '120px'" |
|||
> |
|||
<el-row> |
|||
<el-form-item label="活动地点：" prop="address"> |
|||
<el-input v-model="dataForm.address" type="text" clearable style="width:400px"></el-input>  |
|||
<el-button type="primary" @click="searchKeyword()">搜索</el-button> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label=" " prop="map"> |
|||
<div> |
|||
<div id="container" style="width:500px;height:400px;"></div> |
|||
</div> |
|||
</el-form-item> |
|||
</el-row> |
|||
</el-form> |
|||
<address-check v-if="addressCheckVisible" ref="addressCheck" v-on:checkOk="checkOk"></address-check> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import jsonp from 'jsonp' |
|||
import AddressCheck from './address-check' |
|||
var searchService |
|||
export default { |
|||
name: 'maps', |
|||
data () { |
|||
return { |
|||
dataForm: { |
|||
address: '', |
|||
longitude: 0, // 经度 |
|||
latitude: 0, // 纬度 |
|||
city: '', |
|||
type: 1, |
|||
radius: 200 |
|||
}, |
|||
visible: false, |
|||
addressCheckVisible: false |
|||
} |
|||
}, |
|||
methods: { |
|||
init (type, radius) { |
|||
this.visible = true |
|||
this.dataForm.address = '' |
|||
this.dataForm.type = type |
|||
this.dataForm.radius = radius |
|||
this.getMyLocation() |
|||
}, |
|||
getAddress (lat, lng) { |
|||
this.dataForm.longitude = lng |
|||
this.dataForm.latitude = lat |
|||
var url3 = |
|||
'https://apis.map.qq.com/ws/geocoder/v1/?location=' + |
|||
lat + |
|||
',' + |
|||
lng + |
|||
'&key=MQFBZ-LTWW6-R7XSK-MFXUQ-DVSIE-BGB4M&output=jsonp' |
|||
jsonp(url3, null, (err, data) => { |
|||
if (err) { |
|||
console.log(err) |
|||
} |
|||
console.log(data) |
|||
this.dataForm.address = data.result.address |
|||
}) |
|||
}, |
|||
getMyLocation () { |
|||
var geolocation = new qq.maps.Geolocation( |
|||
'MQFBZ-LTWW6-R7XSK-MFXUQ-DVSIE-BGB4M', |
|||
'e家党群-管理端' |
|||
) |
|||
geolocation.getIpLocation(this.showPosition, this.showErr) |
|||
}, |
|||
showPosition (position) { |
|||
console.log(position) |
|||
this.dataForm.latitude = position.lat |
|||
this.dataForm.longitude = position.lng |
|||
this.dataForm.city = position.city |
|||
this.getAddress(position.lat,position.lng) |
|||
this.setMap() |
|||
}, |
|||
showErr () { |
|||
console.log('定位失败') |
|||
this.getMyLocation() // 定位失败再请求定位，测试使用 |
|||
}, |
|||
setMap () { |
|||
const that = this |
|||
var markerList = [] |
|||
var radiusList = [] |
|||
// 步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器 |
|||
// 设置地图中心点 |
|||
var myLatlng = new qq.maps.LatLng( |
|||
this.dataForm.latitude, |
|||
this.dataForm.longitude |
|||
) |
|||
// 定义工厂模式函数 |
|||
var zoom = this.capacity() |
|||
var myOptions = { |
|||
zoom: zoom, // 设置地图缩放级别 |
|||
center: myLatlng, // 设置中心点样式 |
|||
mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图样式详情参见MapType |
|||
} |
|||
// 获取dom元素添加地图信息 |
|||
var map = new qq.maps.Map( |
|||
document.getElementById('container'), |
|||
myOptions |
|||
) |
|||
// 设置圆形 |
|||
var radius = new qq.maps.Circle({ |
|||
center: new qq.maps.LatLng( |
|||
this.dataForm.latitude, |
|||
this.dataForm.longitude |
|||
), |
|||
radius: this.dataForm.radius, |
|||
map: map |
|||
}) |
|||
radiusList.push(radius) |
|||
var marker = new qq.maps.Marker({ |
|||
position: myLatlng, |
|||
map: map |
|||
}) |
|||
qq.maps.event.addListener(marker,'click',function (event) { |
|||
that.addressCheckHandle() |
|||
}) |
|||
markerList.push(marker) |
|||
// 添加监听事件 获取鼠标单击事件 |
|||
qq.maps.event.addListener(map, 'click', function (event) { |
|||
that.cleanMarkRadius(markerList, radiusList) |
|||
that.getAddress(event.latLng.lat, event.latLng.lng) |
|||
var myLatlng = new qq.maps.LatLng(event.latLng.lat, event.latLng.lng) |
|||
map.setCenter(myLatlng) |
|||
var marker = new qq.maps.Marker({ |
|||
position: event.latLng, |
|||
map: map |
|||
}) |
|||
// 设置圆形 |
|||
var radius = new qq.maps.Circle({ |
|||
center: new qq.maps.LatLng(event.latLng.lat, event.latLng.lng), |
|||
radius: that.dataForm.radius, |
|||
map: map |
|||
}) |
|||
radiusList.push(radius) |
|||
markerList.push(marker) |
|||
qq.maps.event.addListener(map, 'click', function (event) { |
|||
that.cleanMarkRadius(markerList, radiusList) |
|||
}) |
|||
qq.maps.event.addListener(marker, 'click', function (event) { |
|||
that.addressCheckHandle() |
|||
}) |
|||
}) |
|||
// 调用地址解析类 |
|||
searchService = new qq.maps.SearchService({ |
|||
complete: function (result) { |
|||
var pois = result.detail.pois |
|||
if (pois == null || pois.length <= 0) { |
|||
alert('未找到地址!') |
|||
that.getAddress(that.dataForm.latitude, that.dataForm.longitude) |
|||
return |
|||
} |
|||
map.setCenter(pois[0].latLng) |
|||
that.getAddress(pois[0].latLng.lat, pois[0].latLng.lng) |
|||
var marker = new qq.maps.Marker({ |
|||
map: map, |
|||
position: pois[0].latLng |
|||
}) |
|||
// 设置圆形 |
|||
var radius = new qq.maps.Circle({ |
|||
center: new qq.maps.LatLng(pois[0].latLng.lat, pois[0].latLng.lng), |
|||
radius: that.dataForm.radius, |
|||
map: map |
|||
}) |
|||
radiusList.push(radius) |
|||
markerList.push(marker) |
|||
that.cleanMarkRadius(markerList, radiusList) |
|||
qq.maps.event.addListener(marker, 'click', function (event) { |
|||
that.addressCheckHandle() |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
searchKeyword () { |
|||
searchService.setLocation(this.dataForm.city) |
|||
searchService.search(this.dataForm.address) |
|||
}, |
|||
addressCheckHandle () { |
|||
if (this.dataForm.address === '' || !(this.dataForm.latitude > 0)) { |
|||
alert('请选择地址!') |
|||
return |
|||
} |
|||
this.addressCheckVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.addressCheck.init(this.dataForm) |
|||
}) |
|||
}, |
|||
checkOk (checkOk) { |
|||
if (checkOk) { |
|||
this.$emit('position', this.dataForm) |
|||
this.visible = false |
|||
} |
|||
}, |
|||
cleanMarkRadius (markerList, radiusList) { |
|||
if (markerList) { |
|||
if (markerList.length > 1) { |
|||
for (var i4 = 0; i4 < markerList.length - 1; i4++) { |
|||
markerList[i4].setMap(null) |
|||
} |
|||
} else { |
|||
for (var i3 = 0; i3 < markerList.length; i3++) { |
|||
markerList[i3].setMap(null) |
|||
} |
|||
} |
|||
} |
|||
if (radiusList) { |
|||
if (radiusList.length > 1) { |
|||
for (var i2 = 0; i2 < radiusList.length - 1; i2++) { |
|||
radiusList[i2].setMap(null) |
|||
} |
|||
} else { |
|||
for (var i1 = 0; i1 < markerList.length; i1++) { |
|||
radiusList[i1].setMap(null) |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
capacity () { |
|||
if (this.dataForm.radius > 0 && this.dataForm.radius <= 25) { |
|||
return 18 |
|||
} else if (this.dataForm.radius > 25 && this.dataForm.radius <= 50) { |
|||
return 17 |
|||
} else if (this.dataForm.radius > 50 && this.dataForm.radius <= 100) { |
|||
return 16 |
|||
} else if (this.dataForm.radius > 100 && this.dataForm.radius <= 200) { |
|||
return 15 |
|||
} else if (this.dataForm.radius > 200 && this.dataForm.radius <= 500) { |
|||
return 14 |
|||
} else if (this.dataForm.radius > 500 && this.dataForm.radius <= 1000) { |
|||
return 13 |
|||
} else if (this.dataForm.radius > 1000 && this.dataForm.radius <= 2000) { |
|||
return 12 |
|||
} else if (this.dataForm.radius > 2000 && this.dataForm.radius <= 5000) { |
|||
return 11 |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
AddressCheck |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue