当前位置：首页 > news >正文

前端-高德地图选点带搜索功能

news 来源：原创 2025/5/13 6:07:05

先看效果
在这里插入图片描述
地图组件

<template><el-dialogtitle="选择位置"width="800px":visible.sync="showDialog"><div class="mapContainer"><div class="mapSearchBox" v-loading="loading"><div class="mapSearch" v-show="!loading"><el-input placeholder="请输入你要查找的关键词" class="tishikuang" v-model="userInput" id="tishikuang"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input></div><div id="container"></div><div style="text-align: right;margin-bottom: 10px;margin-top: 20px;"><el-button @click="destroyMap">取消</el-button><el-button type="primary" @click="biu">确定</el-button></div></div></div></el-dialog>
</template><script>import AMapLoader from '@amap/amap-jsapi-loader'window._AMapSecurityConfig = {securityJsCode: '你的秘钥'//安全密钥}export default {props: ['zIndex', 'showDialog'],data() {return {visible:true,loading: false,map: null,autoOptions: {input: 'tishikuang' //绑定的搜索关键字的input标签ID},auto: null,userInput: '', //绑定的搜索关键字的的内容placeSearch: null,searchHere: null, //根据搜索组件搜索到以后的地点信息marker: null, //地图标点lnglat: null, //点击地图以后的经纬度geocoder: null,address: ''}},mounted() {setTimeout(() => {this.initMap()}, 500)},methods: {// poi搜索以后 点击确认选址以后的操作biu() {if (this.lnglat) {console.log('选择地点:' + this.lnglat);this.$emit('select', this.lnglat,this.address);} else {this.$message({message: '请选择位置',type: 'warning'});}},initMap() {this.loading = true;// 加载地图AMapLoader.load({key: "你申请的key",version: "2.0",plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType','AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'],}).then((AMap) => {this.map = new AMap.Map("container", { //设置地图容器idviewMode: "3D", //是否为3D地图模式zoom: 17, //初始化地图级别// center: [105.602725, 37.076636], //初始化地图中心点位置});this.auto = new AMap.AutoComplete(this.autoOptions)//this.placeSearch = new AMap.PlaceSearch({map: this.map}) //构造地点查询类this.auto.on('select', this.select)//绑定查询事件this.marker = new AMap.Marker({zIndex:999});this.geocoder = new AMap.Geocoder({// city: "010", //城市设为北京，默认：“全国”// radius: 1000 //范围，默认：500})// 添加点击事件this.map.on('click', (e) => {console.log('点击位置:', e.lnglat);this.map.add(this.marker);this.marker.setPosition(e.lnglat);this.lnglat = e.lnglat;this.geocoder.getAddress(this.lnglat, (status, result) => {if (status === 'complete' && result.regeocode) {this.address = result.regeocode.formattedAddressconsole.log(',,,,'+this.address)}})});}).catch(e => {console.log(e);}).finally(() => {this.loading = false;});},//poi搜索 这里面的这个参数 e 就是搜索以后的地址信息 你可以把它打印出来看一看经纬度什么的都有select(e) {console.log('poi搜索',e)this.placeSearch.setCity(e.poi.adcode) //依据城市ID搜索this.placeSearch.search(e.poi.name) //关键字查询查询this.searchHere = e.poithis.map.setZoom(10,true)},destroyMap() {if (this.map) {this.map.destroy();this.map = null;}this.$emit('closed')}},}
</script>
<style type="text/css">.amap-logo{display: none;opacity:0 !important;}.amap-copyright {opacity:0;}</style>
<style lang="scss" scoped>#container {padding: 0px;margin: 0px;width: 100%;height: 500px;}.mapSearch {margin-bottom: 8px;width: 300px;margin-top: 20px;margin-right: 30px;.el-button {margin-left: 8px;}}#tishikuang {margin-bottom: 200px;display: block;}.mapContainer{// position: fixed;width: 100%;height: 100%;// top:0;.modal{// width: 100%;// height: 100%;// position: absolute;// top: 0;// left: 0;// background-color: #333;opacity: 0.6;}.mapSearchBox{width: 100%;h3{text-align: left;font-size: 18px;font-weight: 500;}.tishikuang{width: 40%;position: absolute;right: 30px;top: 96px;z-index: 21;}}}</style>

引用组件

<map-dialogv-if="showDialog":showDialog="showDialog"z-index="9999"@select="handleLocationSelect"@closed="()=>{showDialog = false}"></map-dialog>
handleLocationSelect(lnglat,address) {this.showDialog = false // 关闭弹窗console.log('hhhh'+address)console.log('hhhh'+lnglat.lng)console.log('hhhh'+lnglat.lat)},