|
|
@@ -1,20 +1,34 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<div class="flex flex-center">
|
|
|
- <el-input class="mr-10" placeholder="请选择项目地址"></el-input>
|
|
|
+ <el-input
|
|
|
+ class="mr-10"
|
|
|
+ placeholder="请选择项目地址"
|
|
|
+ v-model="this.form.address"
|
|
|
+ ></el-input>
|
|
|
<el-button type="primary" plain @click="show = true">查看地图</el-button>
|
|
|
</div>
|
|
|
<el-dialog v-model="show" :width="960">
|
|
|
<template #header
|
|
|
><h4 class="full-width text-left">地理位置</h4></template
|
|
|
>
|
|
|
- <el-input
|
|
|
- v-model="keyword"
|
|
|
- id="input"
|
|
|
- type="text"
|
|
|
- placeholder="搜索位置"
|
|
|
- @keyup.enter="searchKeyword"
|
|
|
- />
|
|
|
+ <div class="full-width flex flex-justify-start">
|
|
|
+ <el-autocomplete
|
|
|
+ v-model="keyword"
|
|
|
+ id="input"
|
|
|
+ type="text"
|
|
|
+ style="width: 50%"
|
|
|
+ :fetch-suggestions="querySearch"
|
|
|
+ placeholder="搜索位置"
|
|
|
+ @keyup.enter="querySearch"
|
|
|
+ @select="handleSelect"
|
|
|
+ />
|
|
|
+ <span
|
|
|
+ class="ml-20 grey-6-bg padding-left padding-right radius-5"
|
|
|
+ style="min-width: 100px"
|
|
|
+ >当前经纬度：{{ longitude }},{{ latitude }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
<div class="flex flex-center flex-justify-start flex-col mt-10">
|
|
|
<div id="container" class="map"></div>
|
|
|
<el-divider />
|
|
|
@@ -29,7 +43,7 @@
|
|
|
<el-button type="primary" plain @click="show = false"
|
|
|
>取 消
|
|
|
</el-button>
|
|
|
- <el-button type="primary">确 定</el-button>
|
|
|
+ <el-button type="primary" @click="submit">确 定</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
@@ -53,6 +67,15 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
immediate: true
|
|
|
+ },
|
|
|
+ address: {
|
|
|
+ handler(val) {
|
|
|
+ if (val.length > 0) {
|
|
|
+ this.form.address = val
|
|
|
+ this.keyword = val
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
|
@@ -61,23 +84,33 @@ export default {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
},
|
|
|
- latitude: {
|
|
|
- type: Number,
|
|
|
- default: 0
|
|
|
+ address: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
},
|
|
|
- longitude: {
|
|
|
- type: Number,
|
|
|
- default: 0
|
|
|
+ latLng: {
|
|
|
+ type: Array,
|
|
|
+ default: []
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
show: false,
|
|
|
map: null,
|
|
|
+ geocoder: '',
|
|
|
keyword: '相国',
|
|
|
auto: null,
|
|
|
- lnglat: [], // 经纬度数组 [lng,lat]
|
|
|
- placeSearch: null
|
|
|
+ latitude: 0,
|
|
|
+ longitude: 0,
|
|
|
+ markAddress: '',
|
|
|
+ placeSearch: null,
|
|
|
+ cityCode: '',
|
|
|
+ markList: [],
|
|
|
+ form: {
|
|
|
+ address: '',
|
|
|
+ longitude: '',
|
|
|
+ latitude: ''
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -92,49 +125,89 @@ export default {
|
|
|
features: ['bg', 'road', 'building', 'point']
|
|
|
})
|
|
|
const _this = this
|
|
|
- AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
|
|
|
+ AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geocoder'], function () {
|
|
|
_this.map.addControl(new AMap.ToolBar())
|
|
|
_this.map.addControl(new AMap.Scale())
|
|
|
+ _this.geocoder = new AMap.Geocoder({
|
|
|
+ radius: 500 // 范围，默认：500
|
|
|
+ })
|
|
|
})
|
|
|
this.map.on('complete', () => {
|
|
|
- this.addMarker(this.latitude, this.longitude)
|
|
|
+ this.addEvent()
|
|
|
this.mapSearchInit()
|
|
|
+ if (this.latLng.length > 0) {
|
|
|
+ this.latitude = this.latLng[0]
|
|
|
+ this.longitude = this.latLng[1]
|
|
|
+ this.addMarker(this.latLng[0], this.latLng[1])
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
- addMarker(lng, lat) {
|
|
|
+ addMarker(lat, lng) {
|
|
|
+ this.map.remove(this.markList)
|
|
|
this.map.setCenter([lng, lat])
|
|
|
const marker = new AMap.Marker({
|
|
|
position: [lng, lat]
|
|
|
})
|
|
|
+ this.markList.push(marker)
|
|
|
marker.setMap(this.map)
|
|
|
+ this.geocoderAddress(lng, lat)
|
|
|
+ },
|
|
|
+ geocoderAddress(lng, lat) {
|
|
|
+ this.geocoder.getAddress([lng, lat], (status, result) => {
|
|
|
+ if (status === 'complete') {
|
|
|
+ this.form.address = result.regeocode.formattedAddress
|
|
|
+ this.keyword = this.form.address
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
addEvent() {
|
|
|
this.map.on('click', event => {
|
|
|
- console.log(event)
|
|
|
+ this.latitude = event.lnglat.lat
|
|
|
+ this.longitude = event.lnglat.lng
|
|
|
+ this.addMarker(this.latitude, this.longitude)
|
|
|
})
|
|
|
},
|
|
|
/** 初始化搜索工具 */
|
|
|
mapSearchInit() {
|
|
|
- const autoOptions = {
|
|
|
- input: 'input'
|
|
|
- }
|
|
|
const _this = this
|
|
|
- AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
|
|
|
- const auto = new AMap.AutoComplete(autoOptions)
|
|
|
- const placeSearch = new AMap.PlaceSearch({
|
|
|
+ AMap.plugin(['AMap.AutoComplete', 'AMap.PlaceSearch'], function () {
|
|
|
+ // 实例化Autocomplete
|
|
|
+ const autoOptions = {
|
|
|
+ city: '全国'
|
|
|
+ }
|
|
|
+ _this.auto = new AMap.AutoComplete(autoOptions)
|
|
|
+ _this.placeSearch = new AMap.PlaceSearch({
|
|
|
map: _this.map
|
|
|
- }) // 构造地点查询类
|
|
|
- _this.auto = auto
|
|
|
- _this.placeSearch = placeSearch
|
|
|
+ })
|
|
|
})
|
|
|
},
|
|
|
/** 关键词搜索 */
|
|
|
- searchKeyword() {
|
|
|
- this.placeSearch.search(this.keyword, function (status, result) {
|
|
|
- // 查询成功时，result即对应匹配的POI信息
|
|
|
- console.log(status)
|
|
|
- console.log(result)
|
|
|
+ handleSelect(res) {
|
|
|
+ this.placeSearch.setCity(res.adcode)
|
|
|
+ this.placeSearch.search(res.name)
|
|
|
+ this.placeSearch.on('markerClick', res => {
|
|
|
+ this.map.remove(this.markList)
|
|
|
+ this.latitude = res.data.location.lat
|
|
|
+ this.longitude = res.data.location.lng
|
|
|
+ this.geocoderAddress(this.longitude, this.latitude)
|
|
|
})
|
|
|
+ },
|
|
|
+ querySearch(key, cb) {
|
|
|
+ this.auto.search(this.keyword, function (status, result) {
|
|
|
+ const tmp = result.tips.map(e => {
|
|
|
+ e.value = e.name + '(' + e.district + ')'
|
|
|
+ return e
|
|
|
+ })
|
|
|
+ console.log(tmp)
|
|
|
+ cb(tmp)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ this.form.address = this.keyword
|
|
|
+ this.form.latitude = this.latitude
|
|
|
+ this.form.longitude = this.longitude
|
|
|
+ this.show = false
|
|
|
+ this.$emit('success', this.form)
|
|
|
}
|
|
|
}
|
|
|
}
|
scorpio