点击 地图时获取 点击位置的经纬度，以及地址信息 之 逆向地理编码

凌晨花未眠
291 阅读1分钟

​持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情

前言

 之前以为 只要地图搜索功能实现，以及能把后端获取的数据渲染至页面， 我就可以解放了，不用在研究地图了(^▽^)，谁曾想，我只是完成了一小部分，o(╥﹏╥)o， 

后面 就让我把 点击搜索后 ，跳转的地址，以及它的经纬度，渲染至表单中，这个就涉及到高德地图的正向地理编码 API（地址转为经纬度）。

我查阅各种资料（在博客、掘金，官网），博客、掘金上的文字大多都是 逆地理编码（经纬度转地址），官网虽说有正向地理编码，奈何看官网也是实现不了，最后我大哥建议让我使用 使用POI选点，

​

 奈何 一看到  PoiPicker依赖jQuery，我就直接投降的跟大哥说，我不会

​

最终实现的效果就是点击 地图时获取 点击位置的经纬度，以及地址信息

效果图

​

总代码 

<template>
  <div class="basics">
    <div class="mapCont">
      <div>
        <el-input
          style="width: 85%"
          v-model="inputObject.userInput"
          placeholder="请输入你要查找的关键词"
          type="text"
        ></el-input>
        <el-button style="width: 85px" type="primary" @click="send"
          >搜索</el-button
        >
      </div>

      <div id="container"></div>
    </div>
    <div class="img">
      <el-input placeholder="请选择图片"></el-input>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { getStation } from "@/api/pile/station.js";
import bus from "@/bus/bus";
window._AMapSecurityConfig = {
  securityJsCode: "829b6b73f84682c2eb982eaa47a745b8",
};
export default {
  data() {
    return {
      map: null,
      autoOptions: {
        input: "",
      },
      inputObject: {
        userInput: "",
        // inputId: "searchInput",
        lnglat: "",
      },
      searchPlaceInput: "",
      auto: null,
      placeSearch: "",
      stationId: this.$route.params.id,
    };
  },
  methods: {
    // 点击搜索按钮
    send() {
      this.searchPlaceInput = this.inputObject.userInput;
      console.log("搜索值", this.searchPlaceInput);
    },
    queryStationInfo() {
      getStation(this.stationId).then((response) => {
        this.lat = response.data.stationLat;
        this.lng = response.data.stationLng;
        console.log(this.lat, this.lng);
        this.initMap(this.lat, this.lng);
      });
    },

    initMap(lat, lng) {
      // console.log(lat, lng);
      AMapLoader.load({
        key: "61436c9c789d301a5b73853d176710cf", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 15, //初始化地图级别
            center: [+lng, +lat], //初始化地图中心点位置
          });
          // this.map.addControl(new AMap.Geolocation());
          // console.log("map", this.map);
          // 设置鼠标的样式
          this.map.setDefaultCursor("pointer");
          // 点标记
          let marker = new AMap.Marker({
            position: new AMap.LngLat(+lng, +lat),
          });
          // 将创建的点标记添加到已有的地图实例
          this.map.add(marker);
          AMap.plugin("AMap.AutoComplete", function () {
            auto = new AMap.AutoComplete(this.autoOptions);
            //构造地点查询类
            auto.on("select", this.select);
          });
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map,
          });
          // 逆向地理编码 -> 要正向地理编码
          this.map.on("click", (e) => {
            let lat = e.lnglat.lat;
            let lng = e.lnglat.lng;
            this.getLngLatService(lat, lng);
            let lnglat = [lng, lat];
            console.log("经纬度", lnglat);
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    select(e) {
      this.placeSearch.search(e.poi.name); //关键字查询查询
    },
    //逆向地理编码服务
    getLngLatService(lat, lng) {
      let pos = [lng, lat];
      let lnglat = new AMap.LngLat(lng, lat);
      let geocoder = new AMap.Geocoder({
        // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
        city: "全国",
      });
      //1.点击地图任意位置生成一个marker
      // let marker = new AMap.Marker({
      //   position: new AMap.LngLat(lng, lat),
      // });
      // this.map.add(marker);
      // 移除已创建的marker
      // this.map.remove(marker);
      let address = "";
      //2.将位置转化为坐标点-->地理信息
      //3.根据地理信息（地址）进行搜索获取详细信息！
      geocoder.getAddress(lnglat, (status, result) => {
        if (status === "complete" && result.regeocode) {
          address = result.regeocode.formattedAddress;
          let res = {
            pos: pos,
            address: address,
          };
          console.log("res", res);
          bus.$emit("res", res);
          //需求：固定的窗体信息进行展示！
        } else {
          log.error("根据经纬度查询地址失败");
        }
      });
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.queryStationInfo();
  },
  created() {
    this.send();
  },
  watch: {
    searchPlaceInput(newValue) {
      if (newValue != null) {
        console.log(newValue);

        this.placeSearch.search(newValue);
        this.map.setZoom(16, true, 1);
      }
    },
  },
};
</script>

<style lang="scss">
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 90%;
}
.basics {
  display: flex;
  height: 500px;
  width: 100%;
}
.mapCont {
  width: 50%;
}
.img {
  margin-left: 20px;
}
// #search_container {
//   height: 50%;
//   width: 50%;
//   display: flex;
//   justify-content: baseline;
//   align-items: center;
//   #searchBtn {
//     height: 100%;
//     width: 65px;
//   }
// }
</style>

补充

你们把代码 cv过去时，没啥效果，是因为 这里面我使用了 eventBus 传值（传值这个在前面的文章里也提到过）

全部代码

  1. scr  ->  bus / bus.js 
import Vue from "vue";
//兄弟组件之间进行通行
export default new Vue();

  1. 自己 封装 表单的 .vue 文件

​

代码

import bus from "@/bus/bus";


 mounted() {
    // 接收map 地图传过来的搜索值
    bus.$on("res", (data) => {
      console.log(data); // data就是它传过来的值
        
      // 赋值  
      this.station.stationLng = data.pos[0];
      this.station.stationLat = data.pos[1];
      this.station.address = data.address;
    });
  },

小结

总代码中 代码的代码片段

 //逆向地理编码服务
    getLngLatService(lat, lng) {
      let pos = [lng, lat];
      let lnglat = new AMap.LngLat(lng, lat);
      let geocoder = new AMap.Geocoder({
        // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
        city: "全国",
      });
      //1.点击地图任意位置生成一个marker
      // let marker = new AMap.Marker({
      //   position: new AMap.LngLat(lng, lat),
      // });
      // this.map.add(marker);
      // 移除已创建的marker
      // this.map.remove(marker);
      let address = "";
      //2.将位置转化为坐标点-->地理信息
      //3.根据地理信息（地址）进行搜索获取详细信息！
      geocoder.getAddress(lnglat, (status, result) => {
        if (status === "complete" && result.regeocode) {
          address = result.regeocode.formattedAddress;
          let res = {
            pos: pos,
            address: address,
          };
          console.log("res", res);
          bus.$emit("res", res);
          //需求：固定的窗体信息进行展示！
        } else {
          log.error("根据经纬度查询地址失败");
        }
      });
    },

pos：经纬度  

​

avatar
文章
阅读
粉丝