【无标题】vue+高德地图 搜索+搜索提示+标点定位+详细地址+经纬度

npm i @amap/amap-jsapi-loader –save
<template>
  <div>
    <div>经度:{{lat}}</div>
    <div>纬度:{{lng}}</div>
    <div id="myPageTop">
      <label>请输入关键字：</label>
      <el-input size="mini" v-model="keyword" id="tipinput" style="width: 200px;"/>
      <el-button type="primary" @click="geoCode" size="mini">搜索</el-button>
    </div>
    <div id="container"></div>
  </div>
</template>
<script>
window._AMapSecurityConfig = {
  securityJsCode: "你的密钥"
};
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  mounted() {
    this.initMap();
  },
  data() {
    return {
      keyword: "广州生物岛",//关键字
      lat: "",//纬度
      lng: "",//经度
      auto: null,//查询
      placeSearch: null,//查询类
      geocoder: null,//转码
      marker: null,//标记点
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "你的key", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.PlaceSearch",
          "AMap.Geocoder",
          "AMap.AutoComplete",
          "AMap.Marker"
        ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then(AMap => {
        const vm = this;
        this.map = new AMap.Map("container", {
          //设置地图容器id
          // viewMode: "3D", //是否为3D地图模式
          resizeEnable: true,
          zoom: 16, //初始化地图级别
          center: [105.602725, 37.076636] //初始化地图中心点位置
        });
        this.geocoder = new AMap.Geocoder({
          // city: "010" //城市设为北京，默认：“全国”
        });
        this.geoCode();
        this.marker = new AMap.Marker();
        this.map.on("click", this.showInfoClick);
        //----------------------
        let autoOptions = {
          input: "tipinput"
        };
        this.auto = new AMap.AutoComplete(autoOptions);
        this.placeSearch = new AMap.PlaceSearch({
          map: vm.map
        });
        //构造地点查询类
        this.auto.on("select", this.select); //注册监听，当选中某条记录时会触发
      });
    },
    select(e) {
      this.keyword = e.poi.name
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(this.keyword); //关键字查询查询
      this.geoCode()
    },
    // 点击事件
    showInfoClick(e) {
      const vm = this;
      this.lat = e.lnglat.getLat();
      this.lng = e.lnglat.getLng();
      var lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      this.getNewAddress(lnglat);
    },
    // 加标记
    addMarker(lnglat, address) {
      this.marker.setPosition(lnglat);
      this.map.add(this.marker); // 将创建的点标记添加到已有的地图实例
      this.map.setFitView(this.marker); //移动中心
      //   this.marker.setTitle('我是marker的title');
      this.marker.setLabel({
        direction: "top",
        offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
        content: address //设置文本标注内容
      });
    },
    // 经纬度转中文
    getNewAddress(lnglat) {
      const vm = this;
      vm.geocoder.getAddress(lnglat, function(status, result) {
        console.log(result);
        if (status === "complete" && result.regeocode) {
          var address = result.regeocode.formattedAddress;
          vm.addMarker(lnglat, address);
        } else {
          console.log("根据经纬度查询地址失败");
        }
      });
    },
    // 中文转经纬度
    geoCode() {
      const vm = this;
      if (!vm.keyword) {
        this.$message.warning("请输入关键字");
        return;
      }
      //   var address = document.getElementById("address").value;
      var address = vm.keyword;
      this.geocoder.getLocation(address, function(status, result) {
        if (status === "complete" && result.geocodes.length) {
          console.log(result.geocodes);
          var lnglat = result.geocodes[0].location;
          //   document.getElementById("lnglat").value = lnglat;
          vm.lat = lnglat.lat;
          vm.lng = lnglat.lng;
          var lnglat = [vm.lng, vm.lat];
          //   反解
          vm.getNewAddress(lnglat);
          // var targetAddress = result.geocodes[0].formattedAddress
          // vm.addMarker(lnglat, targetAddress);
        } else {
          console.log("根据地址查询位置失败");
        }
      });
    }
  }
};
</script>
<style scoped>
#container {
  width: 800px;
  height: 300px;
}
</style>