200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > vue + 百度地图 地址搜索并定位

vue + 百度地图 地址搜索并定位

时间:2022-04-19 22:32:41

相关推荐

vue + 百度地图 地址搜索并定位

1、先上效果图

2、实现方法:

<el-input v-model="searchKey" clearable placeholder="请输入搜索地址" @keyup.enter.native="mapSearch"><el-button slot="append" icon="el-icon-search" @click="mapSearch" /></el-input>methods:init(){const map = new BMapGL.Map('map') // 创建地图实例...this.map = map}mapSearch(){//创建地址解析器实例var myGeo = new BMapGL.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint(this.searchKey, (point)=>{if(point){this.map.clearOverlays() // 清空地图上的覆盖物this.map.centerAndZoom(point, 12)this.map.addOverlay(new BMapGL.Marker(point)) //重新绘制当前位置覆盖物-marker点myGeo.getLocation(point, (rs) => {console.log('当前位置详细信息---',rs)})}else{// alert('您选择的地址没有解析到结果!');this.$message({type: 'error',message: '您输入的地址没有解析到结果!请重新输入'})this.searchKey = '' // 清空搜索框}},this.searchKey)}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。