|
|
|
@ -1,182 +1,190 @@ |
|
|
|
|
|
|
|
<template> |
|
|
|
<el-dialog :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false"> |
|
|
|
<el-form :inline="true" |
|
|
|
<el-form |
|
|
|
:inline="true" |
|
|
|
:model="dataForm" |
|
|
|
:label-width="$i18n.locale === 'en-US' ? '120px' : '120px'"> |
|
|
|
: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 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"> |
|
|
|
<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> |
|
|
|
var searchService; |
|
|
|
import jsonp from 'jsonp' |
|
|
|
import AddressCheck from './address-check' |
|
|
|
var searchService |
|
|
|
export default { |
|
|
|
name:'maps', |
|
|
|
name: 'maps', |
|
|
|
data () { |
|
|
|
return { |
|
|
|
dataForm: { |
|
|
|
address: "", |
|
|
|
longitude:0,//经度 |
|
|
|
latitude:0,//纬度 |
|
|
|
city:'', |
|
|
|
address: '', |
|
|
|
longitude: 0, // 经度 |
|
|
|
latitude: 0, // 纬度 |
|
|
|
city: '', |
|
|
|
type: 1, |
|
|
|
radius:200 |
|
|
|
radius: 200 |
|
|
|
}, |
|
|
|
visible: false, |
|
|
|
addressCheckVisible:false |
|
|
|
|
|
|
|
addressCheckVisible: false |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
init (type,radius) { |
|
|
|
init (type, radius) { |
|
|
|
this.visible = true |
|
|
|
this.dataForm.address = '' |
|
|
|
this.dataForm.type = type |
|
|
|
this.dataForm.radius = radius |
|
|
|
this.getMyLocation(); |
|
|
|
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) { |
|
|
|
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); |
|
|
|
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(); |
|
|
|
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();//定位失败再请求定位，测试使用 |
|
|
|
showErr () { |
|
|
|
console.log('定位失败') |
|
|
|
this.getMyLocation() // 定位失败再请求定位，测试使用 |
|
|
|
}, |
|
|
|
setMap() { |
|
|
|
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 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); |
|
|
|
//设置圆形 |
|
|
|
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), |
|
|
|
center: new qq.maps.LatLng( |
|
|
|
this.dataForm.latitude, |
|
|
|
this.dataForm.longitude |
|
|
|
), |
|
|
|
radius: this.dataForm.radius, |
|
|
|
map: map |
|
|
|
}); |
|
|
|
radiusList.push(radius); |
|
|
|
}) |
|
|
|
radiusList.push(radius) |
|
|
|
var marker = new qq.maps.Marker({ |
|
|
|
position:myLatlng, |
|
|
|
map:map |
|
|
|
}); |
|
|
|
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); |
|
|
|
// 添加监听事件 获取鼠标单击事件 |
|
|
|
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 |
|
|
|
}); |
|
|
|
//设置圆形 |
|
|
|
position: event.latLng, |
|
|
|
map: map |
|
|
|
}) |
|
|
|
// 设置圆形 |
|
|
|
var radius = new qq.maps.Circle({ |
|
|
|
center:new qq.maps.LatLng(event.latLng.lat,event.latLng.lng), |
|
|
|
center: new qq.maps.LatLng(event.latLng.lat, event.latLng.lng), |
|
|
|
radius: that.dataForm.radius, |
|
|
|
map: map |
|
|
|
}); |
|
|
|
radiusList.push(radius); |
|
|
|
}) |
|
|
|
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(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
//调用地址解析类 |
|
|
|
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); |
|
|
|
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); |
|
|
|
|
|
|
|
map.setCenter(pois[0].latLng) |
|
|
|
that.getAddress(pois[0].latLng.lat, pois[0].latLng.lng) |
|
|
|
var marker = new qq.maps.Marker({ |
|
|
|
map:map, |
|
|
|
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), |
|
|
|
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(); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}) |
|
|
|
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); |
|
|
|
searchKeyword () { |
|
|
|
searchService.setLocation(this.dataForm.city) |
|
|
|
searchService.search(this.dataForm.address) |
|
|
|
}, |
|
|
|
addressCheckHandle() { |
|
|
|
if (this.dataForm.address =='' || !(this.dataForm.latitude > 0)){ |
|
|
|
alert("请选择地址！"); |
|
|
|
addressCheckHandle () { |
|
|
|
if (this.dataForm.address === '' || !(this.dataForm.latitude > 0)) { |
|
|
|
alert('请选择地址!') |
|
|
|
return |
|
|
|
} |
|
|
|
this.addressCheckVisible = true |
|
|
|
@ -184,54 +192,52 @@ export default { |
|
|
|
this.$refs.addressCheck.init(this.dataForm) |
|
|
|
}) |
|
|
|
}, |
|
|
|
checkOk(checkOk){ |
|
|
|
if (checkOk){ |
|
|
|
checkOk (checkOk) { |
|
|
|
if (checkOk) { |
|
|
|
this.$emit('position', this.dataForm) |
|
|
|
this.visible = false |
|
|
|
} |
|
|
|
}, |
|
|
|
cleanMarkRadius(markerList,radiusList) { |
|
|
|
cleanMarkRadius (markerList, radiusList) { |
|
|
|
if (markerList) { |
|
|
|
if(markerList.length > 1){ |
|
|
|
for (var i = 0; i < markerList.length-1; i++) { |
|
|
|
markerList[i].setMap(null); |
|
|
|
if (markerList.length > 1) { |
|
|
|
for (var i4 = 0; i4 < markerList.length - 1; i4++) { |
|
|
|
markerList[i4].setMap(null) |
|
|
|
} |
|
|
|
} else { |
|
|
|
for (var i = 0; i < markerList.length; i++) { |
|
|
|
markerList[i].setMap(null); |
|
|
|
for (var i3 = 0; i3 < markerList.length; i3++) { |
|
|
|
markerList[i3].setMap(null) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
if (radiusList) { |
|
|
|
if(radiusList.length > 1){ |
|
|
|
for (var i = 0; i < radiusList.length-1; i++) { |
|
|
|
radiusList[i].setMap(null); |
|
|
|
if (radiusList.length > 1) { |
|
|
|
for (var i2 = 0; i2 < radiusList.length - 1; i2++) { |
|
|
|
radiusList[i2].setMap(null) |
|
|
|
} |
|
|
|
} else { |
|
|
|
for (var i = 0; i < markerList.length; i++) { |
|
|
|
radiusList[i].setMap(null); |
|
|
|
for (var i1 = 0; i1 < markerList.length; i1++) { |
|
|
|
radiusList[i1].setMap(null) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
capacity() { |
|
|
|
if(0 < this.dataForm.radius && this.dataForm.radius <= 25){ |
|
|
|
capacity () { |
|
|
|
if (this.dataForm.radius > 0 && this.dataForm.radius <= 25) { |
|
|
|
return 18 |
|
|
|
} else if (25 < this.dataForm.radius && this.dataForm.radius <= 50){ |
|
|
|
} else if (this.dataForm.radius > 25 && this.dataForm.radius <= 50) { |
|
|
|
return 17 |
|
|
|
} else if (50 < this.dataForm.radius && this.dataForm.radius <= 100){ |
|
|
|
} else if (this.dataForm.radius > 50 && this.dataForm.radius <= 100) { |
|
|
|
return 16 |
|
|
|
} else if (100 < this.dataForm.radius && this.dataForm.radius <= 200){ |
|
|
|
} else if (this.dataForm.radius > 100 && this.dataForm.radius <= 200) { |
|
|
|
return 15 |
|
|
|
} else if (200 < this.dataForm.radius && this.dataForm.radius <= 500){ |
|
|
|
} else if (this.dataForm.radius > 200 && this.dataForm.radius <= 500) { |
|
|
|
return 14 |
|
|
|
} else if (500 < this.dataForm.radius && this.dataForm.radius <= 1000){ |
|
|
|
} else if (this.dataForm.radius > 500 && this.dataForm.radius <= 1000) { |
|
|
|
return 13 |
|
|
|
} else if (1000 < this.dataForm.radius && this.dataForm.radius <= 2000){ |
|
|
|
} else if (this.dataForm.radius > 1000 && this.dataForm.radius <= 2000) { |
|
|
|
return 12 |
|
|
|
} else if (2000 < this.dataForm.radius && this.dataForm.radius <= 5000){ |
|
|
|
} else if (this.dataForm.radius > 2000 && this.dataForm.radius <= 5000) { |
|
|
|
return 11 |
|
|
|
} |
|
|
|
} |
|
|
|
|
zhangyongzhangyong
6 years ago