vue2中使⽤⾼德地图实现搜索定位（⼆）
由于赶项⽬，搜索获取某个位置信息实现后并未解决点击地图也可以获取相应的位置信息，后来实现，以此记录：
需求：可以搜索点位，也可以在地图上点击获取位置的详细信息，并制作成组件
过程：通过查询发现原来⽤的搜索组件并不⽀持给予初始值，⾃然也⽆法把点图上点击的地点位置信息获取后显⽰在搜索框中，提炼成组件以后也⽆法回显，只能⽤input输⼊，再增加搜索后的提⽰列表来模拟：
代码如下：
主页⾯vue⽂件
<template>
<div class="contain">
<div v-if="primitiveData.locationName">
搜索:{{primitiveData.name}}，详细地址为:{{primitiveData.locationName}}，经度:{{primitiveData.longitude}}，纬度:{{primitiveData.latitude}}
</div>
<div>
<el-input v-model="location" placeholder="定位" readonly @click.native="siteDialog=true"></el-input>
</div>
<Site :dialogShow.sync="siteDialog" @locationSure="locationSure" :primitiveData="primitiveData"></Site>
</div>
</template>
<script>
import Site from '@/components/site'
export default {
name: 'AMapDemo',
components: {
Site
},
data() {
return {box sizing
location:'',
siteDialog:false,
primitiveData:{}
}
},
methods: {
locationSure(val) {
// 定位地址
console.log(val)
this.location = val.name
this.primitiveData =val
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.amap-demo {
width: 100%;
height: 600px;
position: relative;
}
.search-box {
height: 35px;
margin: 10px auto;
width: calc(100% - 20px);
// border-radius:16px;
box-shadow: none;
background: #ffff;
border: 1px solid #e6e6e6;
.search-box-wrapper {
input {
background: #fff;
padding-left: 20px;
}
.search-btn {
color: #2A67FE;
width: 90px;
height: 20px;
box-sizing: border-box;
border-left: 1px solid #D7D7D7;
}
</style>
组件vue页⾯：
<template>
<div v-if="dialogShow">
<el-dialog title="定位" width="520px" :before-close="hide" :visible.sync="dialogShow" :close-on-click-modal="false"      append-to-body class="site">
<el-row class="app-container home">
<el-col :span="24" class="box">
<el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo" :events="events">            <el-amap-marker :position="center" key="100"></el-amap-marker>
</el-amap>
<div class="searchBox">
<el-input v-model="inputValue" placeholder="搜索地名或者地址" id="tipinput" prefix-icon="el-icon-search"
class="searchInput"></el-input>
<div class="searchContainer">
<div class="searchItem" v-for="(item, index) in list" :key="item.id"
: @click="itemChange(item, index)">
<div>{{item.name}}</div>
<div >{{item.address}}</div>
</div>
</div>
</div>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button @click="hide">取消</el-button>
<el-button type="primary" @click="save">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "site",
components: {},
props: {
dialogShow: {},
primitiveData: {}
},
data() {
return {
tabIndex: '',
list: [],
activeIndex: '',
zoom: 12,
center: [118.02, 24.48],
searchOption: {
citylimit: false
},
inputValue: '',
searchResult: {
address: '',
latitude: '',
longitude: '',
name: '',
type: '',
country: '',
province: '',
city: '',
area: '',
township: '',
street: '',
neighborhood: '',
locationName: ''
},
events: {
// 地图上的点击事件
click: (e) => {
this.$nextTick(() => {
let that = this
that.position = [e.lnglat.lng, e.lnglat.lat]
let geocoder = new AMap.Geocoder({});
if (status === 'complete' && result.info === 'OK') {
let obj = ode.addressComponent
}
});
})
}
}
}
},
computed: {},
watch: {
dialogShow(val) {
if (val) {
this.inputValue = this.primitiveData.name
this.list = []
}
},
inputValue(value) {
if (value) {
// 监听输⼊内容
this.initMapByInput()
}
}
},
mounted() {},
methods: {
itemChange(n, index) {
const that = this;
that.activeIndex = index
// 输⼊后搜索出来的，反地理编码出来的参数有所不同
let lng = n.lng || n.longitude || n.location.lng
let lat = n.lat || n.latitude || n.location.lat
let name = n.name || ''
that.inputValue = name
< = 13
that.position = [lng, lat]
that.searchResult.address = n.address
that.searchResult.latitude = lat
that.searchResult.longitude = lng
that.searchResult.name = name
let geocoder = new AMap.Geocoder({});
if (status === 'complete' && result.info === 'OK') {
let obj = ode.addressComponent
that.searchResult.locationName = obj.province + obj.city + obj.district + wnship + obj.street +              obj.streetNumber + (n.address || obj.building || '')
}
});
},
initMapByInput() {
let that = this
// ⾃动搜索插件
AMap.plugin('AMap.Autocomplete', () => {
let autoOptions = {
city: '全国'
};
let autoComplete = new AMap.Autocomplete(autoOptions)
autoComplete.search(that.inputValue, function(status, e) {
if (status === 'complete' && e.info === 'OK') {
if (e.tips && e.tips.length > 0) {
let tips = e.tips.filter((i) => {
return i.location && i.address.length > 0
})
let tip = tips[0]
< = [tip.location.lng, tip.location.lat]
< = 13
that.position = [tip.location.lng, tip.location.lat]
that.list = tips
that.searchResult.address = tip.address
that.searchResult.latitude = tip.location.lat
that.searchResult.longitude = tip.location.lng
that.searchResult.name = tip.name
let geocoder = new AMap.Geocoder({});
if (status === 'complete' && result.info === 'OK') {
let obj = ode.addressComponent
that.searchResult.locationName = obj.province + obj.city + obj.district + wnship +
obj.street + tip.address
}
});
} else {
that.list = []
that.searchResult = []
});
});
},
// 保存提交
save() {
this.$emit('locationSure', this.searchResult)
this.$emit('update:primitiveData', this.searchResult)        this.hide()
},
// 关闭弹框
hide() {
this.dataShow = false
this.inputValue = ''
this.$emit("update:dialogShow", false)
},
},
};
</script>
<style lang="scss" scoped>
ul,
dl {
padding: 0;
margin: 0;
list-style-type: none;
}
::-webkit-scrollbar {
display: none;
}
.
amap-demo {
width: 100%;
height: 600px;
position: relative;
}
.site /deep/ {
.el-dialog__body {
padding: 0;
border-bottom: 1px solid #E4E4E4;
}
.app-container {
padding: 0;
}
.search-box {
height: 35px;
margin: 10px auto;
width: calc(100% - 20px);
// border-radius:16px;
box-shadow: none;
background: #ffff;
border: 1px solid #e6e6e6;
.search-box-wrapper {
input {
background: #fff;
padding-left: 20px;
}
.search-btn {
color: #2A67FE;
width: 90px;
height: 20px;
box-sizing: border-box;
border-left: 1px solid #D7D7D7;
}
}
}
}
.searchBox {
width: 100%;
height: 230px;
border-radius: 10px 10px 0 0;
background: #fff;
font-size: 13px;
color: #333333;
position: absolute;
z-index: 999;
margin-top: 10px;
overflow: hidden;
.searchContainer {
height: 180px;
margin-top: 10px;
overflow-y: auto;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.
searchItem {
color: #333;
font-size: 13px;
text-align: left;
padding: 7px 10px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #e6e6e6;
cursor: pointer;
}
}
:
:v-deep .el-vue-search-box-container .search-tips {    width: 100%;
top: 100%;
max-height: 190px;
overflow: auto;
}
.active {
background: #DBE5F2;
}
.searchInput {
margin: 0px 10px;
background: #F7F8FA;
border-radius: 16px;
margin-top: 5px;
height: 32px;
width: calc(100% - 20px);
box-sizing: border-box;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。