<template>
|
<div>
|
<el-row :gutter="20" style="margin-bottom: 10px">
|
<el-col :span="18">
|
<!--<el-form :inline="true" :model="myForm">-->
|
<!--<el-form-item label="地址">-->
|
<el-input id="place" v-model="myForm.address" type="textarea" :rows="1" placeholder="输入可以检索地址" />
|
<span style="color: #F56C6C;">自动识别的地址存在误差。如有错误，请自行更正！</span>
|
<!--</el-form-item>-->
|
<!--<el-form-item>-->
|
<!--</el-form-item>-->
|
<!--</el-form>-->
|
</el-col>
|
<el-col :span="6">
|
<el-button type="primary" @click="save">确定</el-button>
|
</el-col>
|
</el-row>
|
<!--<el-form :inline="true" label-width="100px" :model="myForm" class="demo-form-inline">-->
|
<!--<!–<el-form-item label="检索地址">–>-->
|
<!--<!–<el-input id="place" v-model="myForm.address" placeholder="检索地址" />–>-->
|
<!--<!–</el-form-item>–>-->
|
<!--<el-form-item label="省">-->
|
<!--<el-input v-model="myForm.prov" />-->
|
<!--</el-form-item>-->
|
<!--<el-form-item label="市">-->
|
<!--<el-input v-model="myForm.city" />-->
|
<!--</el-form-item>-->
|
<!--<el-form-item label="区">-->
|
<!--<el-input v-model="myForm.area" />-->
|
<!--</el-form-item>-->
|
<!--<el-form-item label="经度">-->
|
<!--<el-input v-model="myForm.lat" />-->
|
<!--</el-form-item>-->
|
<!--<el-form-item label="维度">-->
|
<!--<el-input v-model="myForm.lng" />-->
|
<!--</el-form-item>-->
|
<!--<el-form-item>-->
|
<!--<el-button type="primary" @click="save">确定</el-button>-->
|
<!--</el-form-item>-->
|
<!--</el-form>-->
|
<div id="container" style="width: 100%;height: 500px" />
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
myForm: {
|
prov: '',
|
city: '',
|
area: '',
|
address: '',
|
lat: '',
|
lng: ''
|
}
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
init() {
|
// console.log(this.myForm)
|
const that = this
|
const center = new window.qq.maps.LatLng(39.916527, 116.397128) // 地图的中心地理坐标。
|
const map = new window.qq.maps.Map(document.getElementById('container'), {
|
center: center,
|
zoom: 13
|
})
|
// 获取城市列表接口设置中心点
|
const citylocation = new window.qq.maps.CityService({
|
complete: function(result) {
|
map.setCenter(result.detailWin.latLng)
|
}
|
})
|
// 调用searchLocalCity();方法 根据用户IP查询城市信息。
|
citylocation.searchLocalCity()
|
|
const geocoder = new window.qq.maps.Geocoder()
|
// 设置服务请求成功的回调函数
|
geocoder.setComplete(function(result) {
|
// console.log('逆地址解析', result)
|
const addressComponents = result.detailWin.addressComponents
|
that.myForm.prov = addressComponents.province
|
that.myForm.city = addressComponents.city
|
that.myForm.area = addressComponents.district
|
const location = result.detailWin.location
|
that.myForm.lat = location.lat
|
that.myForm.lng = location.lng
|
const nearPois = result.detailWin.nearPois
|
that.myForm.address = nearPois[0].address + ' ' + nearPois[0].name
|
|
var marker = new window.qq.maps.Marker({
|
position: location,
|
map: map
|
})
|
window.qq.maps.event.addListener(map, 'click', function(event) {
|
marker.setMap(null)
|
})
|
|
map.setCenter(location)
|
map.zoomTo(18)
|
|
// console.log(JSON.stringify(that.myForm))
|
})
|
|
// 添加监听事件 获取鼠标点击事件
|
window.qq.maps.event.addListener(map, 'click', function(event) {
|
// var marker = new qq.maps.Marker({
|
// position: event.latLng,
|
// map: map
|
// })
|
// qq.maps.event.addListener(map, 'click', function(event) {
|
// marker.setMap(null)
|
// })
|
// // 添加到提示窗
|
// const info = new qq.maps.InfoWindow({
|
// map: map
|
// })
|
// // 添加标记点击事件
|
// qq.maps.event.addListener(marker, 'click', function() {
|
// info.open()
|
// info.setContent('<div style="text-align:center;white-space:nowrap;' +
|
// 'margin:10px;">单击标记</div>')
|
// info.setPosition(event.latLng)
|
// })
|
|
geocoder.getAddress(event.latLng)
|
})
|
|
var ap = new window.qq.maps.place.Autocomplete(document.getElementById('place'), {
|
zIndex: 999999
|
})
|
var keyword = ''
|
// 调用Poi检索类。用于进行本地检索、周边检索等服务。
|
var searchService = new qq.maps.SearchService({
|
complete: function(results) {
|
// console.log(results)
|
if (results.type === 'CITY_LIST') {
|
searchService.setLocation(results.detailWin.cities[0].cityName)
|
searchService.search(keyword)
|
return
|
}
|
var pois = results.detailWin.pois
|
var latlngBounds = new qq.maps.LatLngBounds()
|
|
geocoder.getAddress(pois[0].latLng)
|
|
// for (var i = 0, l = pois.length; i < l; i++) {
|
|
// var poi = pois[i]
|
// if (i == 0) {
|
// geocoder.getAddress(poi.latLng)
|
//
|
// // that.myForm.address = poi.address + ' ' + poi.name
|
// }
|
// latlngBounds.extend(poi.latLng)
|
// var marker = new qq.maps.Marker({
|
// map: map,
|
// position: poi.latLng
|
// })
|
//
|
// // 添加到提示窗
|
// const info = new qq.maps.InfoWindow({
|
// map: map
|
// })
|
//
|
// // 添加标记点击事件
|
// qq.maps.event.addListener(marker, 'click', function() {
|
// info.open()
|
// info.setContent('<div style="text-align:center;white-space:nowrap;' +
|
// 'margin:10px;">单击标记</div>')
|
// info.setPosition(poi.latLng)
|
// })
|
//
|
// marker.setTitle(poi.name)
|
// }
|
map.fitBounds(latlngBounds)
|
}
|
})
|
// 添加监听事件
|
window.qq.maps.event.addListener(ap, 'confirm', function(res) {
|
keyword = res.value
|
searchService.search(keyword)
|
})
|
},
|
save() {
|
if (this.myForm.lat == '' || this.myForm.lat == '') {
|
this.$message.error('请先标记地图位置！')
|
return false
|
}
|
this.$emit('save', this.myForm)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
body >div:last-child{
|
z-index: 1000000000 !important;
|
}
|
</style>
|
