前端 vue 使用高德地图组件:(三)设置检索框使用地图插件进行位置检索定位
地图组件在业务中往往也需要设置检索框进行位置的检索及定位,这需要用到高德的两个插件,关键字检索插件和根据关键字定位插件完整代码如下:<template><div class="app-container"><div id="title">高德地图组件展示</div><div id="searchDiv"><el-input id="
·
地图组件在业务中往往也需要设置检索框进行位置的检索及定位,这需要用到高德的两个插件,关键字检索插件和根据关键字定位插件
完整代码如下:
<template>
<div class="app-container">
<div id="title">高德地图组件展示</div>
<div id="searchDiv">
<el-input id="inputContent"
v-model="content"
placeholder="请输入关键字"></el-input>
<div style="width:30%"
id="show"></div>
</div>
<div id="mapcontainer"></div>
<div id="lnglat">
<input type="text" style="height:30px;width:260px;text-align:center;font-size:16px" v-model="lnglat"></input>
</div>
<div id="footer"></div>
</div>
</template>
<script>
import location from "@/assets/image/location.png";
export default {
data() {
return {
mapMain: null,
lngMain: 0,
latMain: 0,
markerMain: null,
content: '',
autocomplete: null,
placeSearch: null
};
},
created() {},
mounted() {
this.initMapMain();
},
computed:{
lnglat: function(){
return this.lngMain + "," + this.latMain //计算属性,根据动态的坐标值随时获取新结果
}
},
methods: {
initMapMain() {
//地图组件绑定div进行初始化并赋值给vue的对象
this.mapMain = new AMap.Map("mapcontainer", {
center: [this.lngMain, this.latMain], //设置显示的地图中心坐标
zoom: 8 //设置地图缩放等级
});
//绑定地图组件内单击事件
this.mapMain.on('click', (e) => {
//去除已经添加的自定义图标
if (this.markerMain != null) {
this.mapMain.remove(this.markerMain)
}
let lng = e.lnglat.getLng()
let lat = e.lnglat.getLat()
this.lngMain = lng
this.latMain = lat
this.drawPoint(lng,lat)
});
//添加地图关键字检索和根据关键字定位插件
let This = this
AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], () => {
let autoOptions = {
input: 'inputContent',
output: 'show'
}
This.autocomplete = new AMap.Autocomplete(autoOptions)
This.placeSearch = new AMap.PlaceSearch({
map: This.mapMain
})
})
this.placeSearch.search(this.content, (status, info) => {
console.log(status, info)
})
this.autocomplete.on('select', (e) => {
this.placeSearch.setCity(e.poi.adcode)
this.placeSearch.search(e.poi.name)
})
},
drawPoint (lng, lat) {
let icon = new AMap.Icon({
image: location,
size: new AMap.Size(25, 35),
imageSize: new AMap.Size(25, 35)
})
this.markerMain = new AMap.Marker({
icon: icon,
position: [lng, lat],
offset: new AMap.Pixel(-15, -30),
draggable: true
})
this.markerMain.setMap(this.mapMain)
this.markerMain.on('dragend', e => {
this.lngMain = e.lnglat.lng
this.latMain = e.lnglat.lat
})
}
}
};
</script>
<style scoped>
#mapcontainer {
height: 300px;
width: 500px;
font-size: 13px;
}
#searchDiv {
position: absolute !important;
z-index: 99 !important;
margin-left: 19%;
margin-top: 2%;
width: 19%;
}
#inputContent {
width: 85%;
}
#show {
width: 85% !important;
visibility: visible;
background-color: white;
}
</style>
更多推荐
已为社区贡献13条内容
所有评论(0)