Vue Cli+高德API实现模糊搜索+返回坐标及信息

来看效果：

实现思路

1. 先去高德官网申请一个key，这里就不多赘述了。传送门
2. 申请完之后就可以上手敲代码啦。先在index.html中添加如下代码

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>

3. 新建一个map.vue

<template>

  <div>
    <div id="container"></div>
    <div id="myPageTop">
      <table>
        <tr>
          <td>
            <label>请输入关键字：</label>
          </td>
        </tr>
        <tr>
          <td>
            <input id="tipinput"/>
          </td>
        </tr>
      </table>
    </div>
    <div class="btn" @click="choose()">确认选择</div>
  </div>

</template>
<script>
  export default {
   data() {
      return {
        // map: null
        addr:'',
        longi:'',
        lati:''
      }
    },
    methods: {
      choose(){
        console.log(this.addr)
        this.$router.push({
          path:'/MineAddUser',
          query:{
            address:this.addr,
            longi:this.longi,
            lati:this.lati,
            obj:this.$route.query.obj
          }
        })
      },
      init() {

        //地图加载
        let map = new AMap.Map("container", {
          resizeEnable: true,
          zoom: 14
        });
        //输入提示
        let autoOptions = {
          input: "tipinput"
        };
        let auto = new AMap.Autocomplete(autoOptions);
        let placeSearch = new AMap.PlaceSearch({
          map: map
        });  //构造地点查询类
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
        let that = this
        function select(e) {
          placeSearch.setCity(e.poi.adcode);
          placeSearch.search(e.poi.name);  //关键字查询查询
          console.log(e.poi)
          that.addr = e.poi.district+e.poi.name
          that.longi = e.poi.location.lng
          that.lati = e.poi.location.lat
          // console.log(that.addr)
        }
        // map.on('click', function(e) {
        //   // alert(e.lnglat.getLng() )
        //   document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        // });
      }
    },
    components:{
      TitleBack
    },
    mounted() {
      // console.log(this.$route.query.obj)
      this.init()
    }
  }
</script>
<style scoped>

  #container {
    width: 100%;
    height: 700px;
  }

  .title {
    position: fixed;
    top: 0;
    z-index: 99;
  }

  .btn {
    text-align: center;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6rem;
    border-radius: 25px;
    width: 50%;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: #5994F0;
    color: #ffffff;
  }
</style>

完成。