实现地图的关键字搜索和点击定位功能

一、引入地图并渲染，如果不会请点这里

二、设置关键字搜索框

<div style="display: flex">  <span style="width: 200px">关键字搜索：</span>  <el-input v-model="input" size="mini" id="tipinput"></el-input></div>

三、按照官方文档，利用高德地图api对搜索框实例化

// 搜索框自动完成类

this.auto = new AMap.AutoComplete({input: 'tipinput'})//构造地点查询类this.placeSearch = new AMap.PlaceSearch({    map: this.map,})// 当选中某条搜索记录时触发this.auto.on("select", this.select)
select(e) {      this.placeSearch.setCity(e.poi.adcode)      this.placeSearch.search(e.poi.name) //关键字查询查询
      // 并把搜索的经纬度进行渲染    },

完成效果如下：

四、根据高德地图api，监听地图点击事件

   // poi覆盖物点击事件        this.placeSearch.on("markerClick", this.clickMarkerHandler)        // 地图点击事件        this.map.on('click', this.clickMapHandler)
// 点击地图事件      clickMapHandler (e) {          this.location.lng = e.lnglat.getLng() || 117.237485          this.location.lat = e.lnglat.getLat() || 31.702453      },    // 点击poi覆盖物事件     clickMarkerHandler (e) {        this.location.lng = e.data.location.lng        this.location.lat = e.data.location.lat    },

制作不易，如果对您有帮助希望给个关注点点赞，就是对我最大的鼓励，如果有不对的请下方评论提出