You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
249 lines
7.7 KiB
249 lines
7.7 KiB
|
|
<template>
|
|
<el-dialog :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false">
|
|
<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
|
|
}
|
|
},
|
|
components: {
|
|
AddressCheck
|
|
},
|
|
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.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
|
|
})
|
|
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
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|