Vue2使用高德地图实现搜索位置（可限制搜索具体城市内）

1、下载高德依赖

npm i @amap/amap-jsapi-loader -S

2、登录高德开发平台获取key和安全密钥

控制台>应用管理>我的应用>创建新应用>添加key值>服务平台选择:Web端(JS API)>获取key值和安全密钥

3、代码部分

<template>
  <div style="width: 100%">
    <div class="search_box">
      <div class="label">关键字搜索</div>
      <el-input
        v-model="input"
        placeholder="请输入内容"
        id="tipinput"
      ></el-input>
    </div>
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"; //引入AMapLoader
window._AMapSecurityConfig = {
  securityJsCode: "秘钥",//高德申请的key的秘钥
};
export default {
  data() {
    return {
      input: "",
      map: null,
      auto: null,
      placeSearch: null,
      lnglat: [],
      markers: [],
      position: {},
      chongqingBounds: [
        [105.518227, 28.30578],
        [110.696612, 32.406646]
      ] // 重庆市边界坐标，可根据实际情况进行调整
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 地图初始化
    initMap() {
      AMapLoader.load({
        key: "key",//高德申请的key
        version: "2.0",
        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"],
      }).then((AMap) => {
        const map = new AMap.Map("container", {
          viewMode: "3D",
          terrain: true,
          zoom: 11,
          center: [106.55844, 29.569],
        });
        this.map = map;
        // 关键字查询
        this.searchMap();
      });
    },
    // 关键字查询
    searchMap() {
      // 搜索框自动完成类
      this.auto = new AMap.AutoComplete({
        input: "tipinput", // 使用联想输入的input的id
        city: "重庆市" // 设置搜索范围为重庆市 这个地方可选任意城市，限制范围的
      });
      //构造地点查询类
      this.placeSearch = new AMap.PlaceSearch({
        map: this.map,
      });
      // 当选中某条搜索记录时触发
      this.auto.on("select", this.selectSite);
    },
    //选中查询出的记录
    selectSite(e) {
      if (e.poi.location) {
        const lnglat = [e.poi.location.lng, e.poi.location.lat];
        if (this.isInBounds(lnglat)) { // 判断坐标是否在重庆市范围内
          this.placeSearch.setCity(e.poi.adcode);
          this.placeSearch.search(e.poi.name); //关键字查询
          let geocoder = new AMap.Geocoder({});
          let that = this;
          geocoder.getAddress(this.lnglat, function (status, result) {
            if (status === "complete" && result.regeocode) {
              that.province = result.regeocode.addressComponent.province;
              that.city = result.regeocode.addressComponent.city;
              //自己想要赋的值，根据自己的做修改
              that.$set(that.form, "province", that.province);
              that.$set(that.form, "city", that.city);
              that.$set(that.form, "address", e.poi.name);
              that.$set(
                that.form,
                "coordinate",
                e.poi.location.lng + "," + e.poi.location.lat
              ); //纬度，经度
            } else {
            }
          });
        } else {
          this.$message.error("查询地址不在重庆市范围内，请重新输入地址");
        }
      } else {
        this.$message.error("查询地址失败，请重新输入地址");
      }
    },
    //  添加标记
    setMarker(lnglat) {
      this.removeMarker();
      let marker = new AMap.Marker({
        position: lnglat,
      });
      marker.setMap(this.map);
      this.markers.push(marker);
    },
    // 删除之前后的标记点
    removeMarker() {
      if (this.markers) {
        this.map.remove(this.markers);
      }
    },
    // 判断坐标是否在重庆市范围内
    isInBounds(lnglat) {
      const bounds = new AMap.Bounds(this.chongqingBounds[0], this.chongqingBounds[1]);
      return bounds.contains(lnglat);
    }
  },
};
</script>

<style lang="scss">
.search_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}
.label {
  color: #000;
  width: 100px;
}
#container {
  width: 1000px;
  height: 700px;
  border: solid 2px #f00;
}
</style>

4、实现效果