<template>
|
<div class="click-location">
|
<el-row>
|
<el-input type="text" v-model="clickLocation" clearable @change="focusLocation"></el-input>
|
</el-row>
|
<el-scrollbar style="height:86.22px">
|
<el-row v-for="(item,index) in searchList" :key="index" style="display: flex;align-items: center">
|
<el-col :span="12">
|
<span>{{ item.name }}</span>
|
</el-col>
|
<el-col :span="12">
|
<el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item)">定位
|
</el-button>
|
</el-col>
|
<!-- <el-pagination-->
|
<!-- layout="prev, pager, next"-->
|
<!-- :total="50">-->
|
<!-- </el-pagination>-->
|
</el-row>
|
</el-scrollbar>
|
<el-row style="text-align: right">
|
<el-button type="primary" @click="confirm">确认</el-button>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
|
import { reportLocationSearch } from '../../../../api/request'
|
import { pulseEffect } from '../../../../utils/utils'
|
import eventBus from '../../../../eventBus'
|
import iconUrl from '../../../../../public/assets/images/map/loc.png'
|
|
export default {
|
name: 'ReportLocationSearch',
|
data () {
|
return {
|
// 点击定位绑定数据
|
clickLocation: '',
|
searchList: [],
|
marker: null
|
}
|
},
|
methods: {
|
// 搜索定位
|
focusLocation () {
|
// console.log(this.clickLocation)
|
// console.log(window.map.getZoom())
|
// console.log(window.map.getBounds())
|
const getBoundsData = '' + window.map.getBounds()._southWest.lng + ',' + window.map.getBounds()._southWest.lat + ',' + window.map.getBounds()._northEast.lng + ',' + window.map.getBounds()._northEast.lat
|
const data = {
|
postStr: {
|
keyWord: this.clickLocation,
|
level: window.map.getZoom(),
|
mapBound: getBoundsData,
|
queryType: 7,
|
count: 14,
|
start: 0,
|
queryTerminal: 10000
|
},
|
type: 'query'
|
}
|
// console.log(data)
|
reportLocationSearch(data).then(res => {
|
// console.log(res)
|
this.searchList = res.pois
|
// console.log(this.searchList)
|
// const as = res.pois[0].lonlat.trim().split(' ')
|
// window.map.setView([as[1], as[0]], 17)
|
// pulseEffect([as[1], as[0]])
|
// for (let i = 0; i < res.pois.length; i++) {
|
// const as = res.pois[i].lonlat.trim().split(' ')
|
// if (res.pois[i].name.indexOf(this.clickLocation) >= 0) {
|
// window.map.setView([as[1], as[0]], 17)
|
// pulseEffect([as[1], as[0]])
|
// }
|
// }
|
})
|
this.clickLocation = ''
|
},
|
// 点击定位
|
locationMapClick (val) {
|
console.log(val)
|
const ps = val.lonlat.trim().split(' ')
|
// const htmls = '<div><ul><li>' + val.name + '</li> + <li>' + val.adress + '</li></ul></div>'
|
// var myIcon = window.L.divIcon({
|
// html: htmls,
|
// className: 'company-bindTooltip',
|
// iconSize: 16
|
// })
|
const htmls = '<div><ul><li>' + val.name + '</li> <br/> <li>' + val.address + '</li> <br/> <li>' + val.phone + '</li></ul></div>'
|
this.marker = window.L.marker([ps[1], ps[0]], {
|
icon: window.L.icon({
|
iconUrl: iconUrl,
|
iconSize: [30, 30],
|
iconAnchor: [15, 15]
|
})
|
// icon: myIcon
|
})
|
.bindTooltip(htmls, {
|
// permanent: 'true',
|
direction: 'bottom',
|
offset: [0, 10],
|
sticky: true,
|
className: ''
|
})
|
window.map.addLayer(this.marker)
|
window.map.setView([ps[1], ps[0]], 17)
|
pulseEffect([ps[1], ps[0]])
|
},
|
// 点击确认按钮事件
|
confirm () {
|
window.mapManager.clearHighlight()
|
window.map.removeLayer(this.marker)
|
this.searchList = []
|
this.clickLocation = ''
|
eventBus.$emit('location-setChange', true)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
/*/deep/ .el-row {*/
|
/* margin: 2px 0 !important;*/
|
/* padding: 0;*/
|
/* height: 10px;*/
|
/* max-height: 10px;*/
|
/*}*/
|
.div-list-search {
|
|
}
|
|
.click-location {
|
margin: 0 auto;
|
text-align: center;
|
|
.el-input {
|
width: 80%;
|
margin: 15px auto;
|
}
|
|
.el-button {
|
margin: 15px auto;
|
}
|
}
|
</style>
|
