|
|
@@ -1,21 +1,35 @@
|
|
|
<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
|
|
|
>
|
|
|
- <input
|
|
|
- v-model="keyword"
|
|
|
- id="input"
|
|
|
- placeholder="搜索位置"
|
|
|
- style="z-index: 9999"
|
|
|
- @keyup.enter="searchKeyword"
|
|
|
- />
|
|
|
- <div class="flex flex-center flex-justify-start flex-col">
|
|
|
+ <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 />
|
|
|
<div class="flex flex-center flex-justify-start full-width">
|
|
|
@@ -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>
|
|
|
@@ -38,34 +52,30 @@
|
|
|
|
|
|
<script>
|
|
|
import filepicker from '@/components/filepicker/index.vue'
|
|
|
-import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
-import { shallowRef } from 'vue'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
filepicker
|
|
|
},
|
|
|
- setup() {
|
|
|
- const map = shallowRef(null)
|
|
|
- return {
|
|
|
- map
|
|
|
- }
|
|
|
- },
|
|
|
watch: {
|
|
|
show: {
|
|
|
handler(val) {
|
|
|
if (val) {
|
|
|
- this.initMap()
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initMap()
|
|
|
+ }, 1000)
|
|
|
}
|
|
|
},
|
|
|
immediate: true
|
|
|
},
|
|
|
- latitude: {
|
|
|
+ address: {
|
|
|
handler(val) {
|
|
|
- if (val.length > 0 && this.show) {
|
|
|
- this.addMarker()
|
|
|
+ if (val.length > 0) {
|
|
|
+ this.form.address = val
|
|
|
+ this.keyword = val
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
|
@@ -74,89 +84,130 @@ 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,
|
|
|
- aMap: null,
|
|
|
- keyword: '',
|
|
|
+ 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: {
|
|
|
initMap() {
|
|
|
- AMapLoader.load({
|
|
|
- key: '6577c6fd4841e6c69d5fb1bd15bd4696', // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
- version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
- plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
+ window._AMapSecurityConfig = {
|
|
|
+ securityJsCode: 'b7c07b56f6647ae56ff3d926a42d9565'
|
|
|
+ }
|
|
|
+ this.map = new AMap.Map('container', {
|
|
|
+ // 设置地图容器id
|
|
|
+ viewMode: '2D', // 是否为3D地图模式
|
|
|
+ zoom: 13, // 初始化地图级别
|
|
|
+ features: ['bg', 'road', 'building', 'point']
|
|
|
})
|
|
|
- .then(AMap => {
|
|
|
- this.map = new AMap.Map('container', {
|
|
|
- // 设置地图容器id
|
|
|
- viewMode: '2D', // 是否为3D地图模式
|
|
|
- zoom: 15, // 初始化地图级别
|
|
|
- mapStyle: 'amap://styles/whitesmoke',
|
|
|
- center: [this.latitude, this.longitude] // 初始化地图中心点位置
|
|
|
- })
|
|
|
- this.addMarker(this.latitude, this.longitude)
|
|
|
- this.addEvent()
|
|
|
- this.mapSearchInit()
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e)
|
|
|
+ const _this = this
|
|
|
+ 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.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) {
|
|
|
- console.log('位置', lng, lat) // lnglat=[经度,纬度]
|
|
|
+ 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'
|
|
|
- }
|
|
|
- this.auto = new AMap.Autocomplete(autoOptions)
|
|
|
- // 注册placeSearch组件
|
|
|
- this.placeSearch = new AMap.PlaceSearch({
|
|
|
- city: '大理'
|
|
|
+ const _this = this
|
|
|
+ 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
|
|
|
+ })
|
|
|
})
|
|
|
- console.log(this.auto, this.placeSearch)
|
|
|
},
|
|
|
/** 关键词搜索 */
|
|
|
- searchKeyword() {
|
|
|
- console.log(this.keyword)
|
|
|
- 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)
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
- // 当选中某条搜索记录时触发
|
|
|
- selectSite(e) {
|
|
|
- console.log(e)
|
|
|
- this.lnglat = [e.poi.location.lng, e.poi.location.lat]
|
|
|
- this.placeSearch.setCity(e.poi.adcode)
|
|
|
- this.placeSearch.search(e.poi.name)
|
|
|
+ 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)
|
|
|
}
|
|
|
}
|
|
|
}
|
scorpioyq