vue 高德地图即时搜索模糊搜索下拉搜索-蒲公英云

vue 高德地图即时搜索模糊搜索下拉搜索

灰太狼 2023-05-30 06:01 66阅读 0赞

index.html里面引入amap：

首先你要去 https://lbs.amap.com/ 注册一个属于自己的key

注册好账号后—点击右上角‘控制台’—左侧边栏‘应用管理—我的应用’—-点击创建应用—-点击加号选择开发平台—添加key

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=你的key"></script>

组件使用：

// 高德地图 模糊搜索
<template>
  <div id="app">
    <el-input id="keyword" v-model="address" name="keyword" placeholder="搜索你想去的地方"/>
   <div id='container' ></div>
  </div>
</template>
<script>
export default {
name: 'test',
data () {
return {
    map: null,
    address:''
}
},
mounted () {
    var windowsArr = [];
    var marker = [];
    var map = new AMap.Map("container", {
            resizeEnable: true,
            center: [120.211877, 30.255194],//地图中心点
            zoom: 13,//地图显示的缩放级别
            keyboardEnable: false
    });
    AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
      var autoOptions = {
        city: "杭州", //城市，默认全国
        input: "keyword"//使用联想输入的input的id
      };
      var autocomplete= new AMap.Autocomplete(autoOptions);
      var placeSearch = new AMap.PlaceSearch({
            city:'杭州',
            map:map
      })
      AMap.event.addListener(autocomplete, "select", function(e){
         //TODO 针对选中的poi实现自己的功能
         placeSearch.setCity(e.poi.adcode);
         placeSearch.search(e.poi.name)
         console.log('经度',e.poi.location.lng)
         console.log('纬度',e.poi.location.lat)
      });
    });
}
}
</script>
<style scoped>
#container{
    width: 400px;
    height: 400px;
    display: none;
}
</style>