vue使用高德地图API实现输入关键字联想地址

欢迎指教！

效果就这

具体实现

在vue组件中引入高德地图API

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0;key=申请的高德地图key&plugin=AMap.Geolocation"></script>

UI布局，编写搜索输入框，这里以饿了么UI为例，注意这里需要配置id属性，后面会用到

<el-input id="myInput" placeholder="请输入你要定位的地址" v-model="address"></el-input>

在mounted钩子函数中将输入联想功能绑定到UI

注意最后一行的this.select是我们自定义的方法，通过该方法来接收选中的地址信息

this.$nextTick(() => {
        AMap.plugin('AMap.Autocomplete', () => {
        // 实例化Autocomplete
        var autoOptions = {
          // input 为绑定输入提示功能的input的DOM ID
          input: 'myInput'
        }
        var autoComplete= new AMap.Autocomplete(autoOptions);
        // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
        AMap.event.addListener(autoComplete, "select", this.select)
      })
    });

select方法定义，以下为例：

methods: {
    select(e){
      this.address = e.poi.name;
      this.searchMap();// 这个方法可以用来实现根据选中的地址信息来在地图上打点等，视具体业务需求
    }
}

此时验证效果会发现api不通，大概是权限之类的。还需要在main.js中配置一下安全秘钥，这个也是在高德地图平台申请的

// 高德API 安全秘钥设置
window._AMapSecurityConfig = {
  securityJsCode: "申请的秘钥"
};

总结

该部分节选自项目的一个搜索定位的功能，是结合地图组件vue-amap来用的，通过输入关键字联想地址后在地图上打点，以及点击地图获取位置信息。可以自行学习下vue-amap的用法。