高德地图(vue项目)-搜索地点

<template>
  <div>
    <!-- -->
    <div id="container"></div>
    <div class="search">
      <input type="input" placeholder="请输入关键字" v-model="keyWord" />
      <button @click="onSearch">搜索</button>
    </div>
    <div id="panel"></div>
  </div>
</template>

<script>
// 引入地图插件
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置秘钥
window._AMapSecurityConfig = {
  securityJsCode: "秘钥",
};
export default {
  name: "GaodeMapContainer",
  data() {
    return {
      map: null, //
      traffic: null, // 实时交通
      keyWord: null, //输入搜索的关键字
    };
  },

  mounted() {
    this.initData();
  },

  methods: {
    // 1. 展示地图
    async initData() {
      const AMap = await AMapLoader.load({
        key: "key", //申请好的Web端开发者key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.PlaceSearch"], // 引入地图控件
      });
      // 3-1. 展示图层--创建图层
      const layer = new AMap.createDefaultLayer({
        zooms: [3, 20], //可见级别
        visible: true, //是否可见
        opacity: 1, //透明度
        zIndex: 0, //叠加层级
      });
      // 2.初始化地图-把地图展示到指定的容器区域内
      this.map = new AMap.Map("container", {
        viewMode: "2D", //默认使用 2D 模式，平面模式
        center: [121.045332, 31.19884], //地图中心点
        zoom: 8.8, //地图级别
        mapStyle: "amap://styles/normal", //设置地图的显示样式
        layers: [layer], //layer为创建的默认图层3-2:展示图层
      });
    },
    onSearch() {
      const placeSearch = new AMap.PlaceSearch({
        pageSize: 5, //单页显示结果条数
        pageIndex: 1, //页码
        city: "010", //兴趣点城市
        citylimit: true, //是否强制限制在设置的城市内搜索
        map: this.map, //展现结果的地图实例
        panel: "panel", //结果列表将在此容器中进行展示。
        autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
      });
      placeSearch.search(this.keyWord, (status, result) => {
        //查询成功时，result 即对应匹配的 POI 信息
      });
    },
  },
};
</script>
<style scoped>
#container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 800px;
  background: pink;
}
.search {
  position: fixed;
  top: 5px;
  right: 10px;
  background-color: white;
}
#panel {
  position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 30px;
  right: 10px;
  width: 280px;
}
</style>
>