Vue 中使用高德地图API 获取地理位置+逆地理编码+正地理编码 附带高德教学_离线地图如何取正地理编码

需求：H5中获得用户位置授权后获取终端经纬度和地点名称，PC/移动端适用。

前言:在初始化配置的时候我尽量多分步骤详细  毕竟配置项有点多 容易蒙圈 用一个东西我们主要的目的是学习他而不是直接用 授人以鱼不如授人以渔(可以跳过 文章后面有完整代码)

第一步 :引入高德API库：

import AMapLoader from '@amap/amap-jsapi-loader'

第二步:绘制地图

<template>
    <section id="amapContainer" />
</template>
 

第三步:添加密钥

找到index.html页面 添加密钥

<script type="text/javascript">

    window._AMapSecurityConfig = {

      securityJsCode: "", //你项目的密钥

    };

    </script>

第四步:初始化地图配置(下面代码所有都亲测有效 直接按照步骤复制阅读就行)

步骤一 :在需要的页面进入引入

import AMapLoader from "@amap/amap-jsapi-loader";

步骤二:首先地图加载参数和地图绘制参数以及添加插件 这里vue2和vue3的用法是一样的 只需要把格式改一下就好了 (建议直接复制vscod更加直观)

<script>

export default {

  data() {

    return {

      data() {

        /*

         key：填写自己web端开发者的key

         其他配置可以默认无需更改

        */

        return {

          //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。

          // map: null,

          //地图加载参数

          AMapLoader: {

            key: "0f742bca0083cbde739491388f2bddc2", // 申请好的Web端开发者Key，首次调用 load 时必填

            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

            /*

            AMap.Geocoder 地理编码与逆地理编码

            AMap.Geolocation 高德基于浏览器API的定位插件

            */

            plugins: ["AMap.Geolocation", "AMap.Geocoder"], // 需要使用的插件列表，所有的插件都在这里配置

          },

          //地图绘制参数

          parameter: {

            zoom: 11, //级别

            viewMode: "3D", //使用3D视图

            resizeEnable: true,

            enableHighAccuracy: true, //是否使用高精度定位，默认:true

            convert: true,

          },

        };

      },

    };

  },

};

</script>

步骤三 获取高德地图实例(必须要在钩子里面执行,记得地图设置宽高 不然显示不出来)

   mounted() {

        /* 注意 : 【高德的所有API都需要再load回调里面进行书写 需要用到返回值AMap 否则都会报错】  */

        AMapLoader.load(this.AMapLoader).then((AMap) => {

          //存储实例地图

          this.map = new AMap.Map("container", this.parameter);

        });

      },

步骤四:设置地图点击事件 获取用户点击地图的地理位置

      mounted() {

        /* 注意 : 【高德的所有API都需要再load回调里面进行书写 需要用到返回值AMap 否则都会报错】  */

        AMapLoader.load(this.AMapLoader).then((AMap) => {

          //存储实例地图

          this.map = new AMap.Map("container", this.parameter);

          //绑定地图点击事件

          this.map.on("click", function (e) {

            console.log(e, "点击地图获取位置");

          });

        });

      },

步骤五:实例逆向转码(所有的插件都需要用到AMap进行new实例)

  mounted() {

        /* 注意 : 【高德的所有API都需要再load回调里面进行书写 需要用到返回值AMap 否则都会报错】  */

        AMapLoader.load(this.AMapLoader).then((AMap) => {

          //存储实例地图

          this.map = new AMap.Map("container", this.parameter);

           //实例逆向转码

          const Geocoder = new AMap.Geocoder();

          this.map.on("click", function (e) {

            console.log(e, "点击地图获取位置");

          });

        });

      },

步骤五:获取用户当前地理位置(注意要写在then回调里面 否则会报错)

 mounted() {

        /* 注意 : 【高德的所有API都需要再load回调里面进行书写 需要用到返回值AMap 否则都会报错】  */

        AMapLoader.load(this.AMapLoader).then((AMap) => {

          //存储实例地图

          this.map = new AMap.Map("container", this.parameter);

          //实例逆向转码

          const Geocoder = new AMap.Geocoder();

          this.map.on("click", function (e) {

            console.log(e, "点击地图获取位置");

          });

          this.map.plugin("AMap.Geolocation", () => {

            var geolocation = new AMap.Geolocation({

              enableHighAccuracy: true, //是否使用高精度定位，默认:true

              timeout: 10000, //超过10秒后停止定位，默认：无穷大

              maximumAge: 0, //定位结果缓存0毫秒，默认：0

              convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true

              showButton: true, //显示定位按钮，默认：true

              buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角

              showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true

              showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true

              panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true

              zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

            });

            geolocation.getCurrentPosition(function (status, result) {

              if (status == "complete") {

                //授权成功获取的经纬度

                const {

                  position: { lng, lat },

                } = result;

                console.log(lng,lat);

              }

            });

          });

        });

      },

步骤六:定义逆地理编码+正地理编码工具函数

  methods: {

    // 根据获取到的经纬度进行逆地理编码

    /*

    real:逆向转码实例 就是 Geocoder

    lng和lat就是经纬度

    */

    reverse(real, lng, lat) {

      real.getAddress([lng, lat], (status, res) => {

        if (status === "complete") {

          // address即经纬度转换后的地点名称

          console.log(res, status);

        }

      });

    },

    // 根据获取到的经纬度进行正向地理编码

     /*

    real:逆向转码实例 就是 Geocoder

    lng和lat就是具体地理位置

    */

    limit(real,address){

      real.getLocation(address,(res,req)=>{

        console.log(res,req);

      })

    }

  },

步骤七 使用工具函数编码

 mounted() {

    AMapLoader.load(this.AMapLoader).then((AMap) => {

      //实例地图

      this.map = new AMap.Map("container", this.parameter);

      //实例逆向转码

      const Geocoder = new AMap.Geocoder();

      let that = this;

      this.map.on("click", function (e) {

        //根据获取到的经纬度进行逆地理编码

        that.reverse(Geocoder, e.lnglat.getLng(), e.lnglat.getLat());

        //根据获取到的经纬度进行正向地理编码

        that.limit(Geocoder,'北京市朝阳区阜荣街10号')

      });

      this.map.plugin("AMap.Geolocation", () => {

        var geolocation = new AMap.Geolocation({

          enableHighAccuracy: true, //是否使用高精度定位，默认:true

          timeout: 10000, //超过10秒后停止定位，默认：无穷大

          maximumAge: 0, //定位结果缓存0毫秒，默认：0

          convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true

          showButton: true, //显示定位按钮，默认：true

          buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角

          showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true

          showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true

          panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true

          zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

        });

        geolocation.getCurrentPosition(function (status, result) {

          if (status == "complete") {

            const {

              position: { lng, lat },

            } = result;

            // 根据获取到的经纬度进行逆地理编码

            that.reverse(Geocoder, lng, lat);

          }

        });

      });

    });

  },

这就是完整步骤了

下面放整个代码图

<template>

  <div>

    <div id="container"></div>

  </div>

</template>

<script>

import AMapLoader from "@amap/amap-jsapi-loader";

export default {

  data() {

    return {

      //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。

      map:null,

      //地图加载参数

      AMapLoader: {

        key: "  0f742bca0083cbde739491388f2bddc2", // 申请好的Web端开发者Key，首次调用 load 时必填

        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

        plugins: ["AMap.Geolocation", "AMap.Geocoder"], // 需要使用的插件列表，如比例尺'AMap.Scale'等

      },

      //地图绘制参数

      parameter: {

        zoom: 11, //级别

        viewMode: "3D", //使用3D视图

        resizeEnable: true,

        enableHighAccuracy: true, //是否使用高精度定位，默认:true

        convert: true,

      },

    };

  },

  methods: {

    // 根据获取到的经纬度进行逆地理编码

    /*

    real:逆向转码实例 就是 Geocoder

    lng和lat就是经纬度

    */

    reverse(real, lng, lat) {

      real.getAddress([lng, lat], (status, res) => {

        if (status === "complete") {

          // address即经纬度转换后的地点名称

          console.log(res, status);

        }

      });

    },

    // 根据获取到的经纬度进行正向地理编码

     /*

    real:逆向转码实例 就是 Geocoder

    lng和lat就是具体地理位置

    */

    limit(real,address){

      real.getLocation(address,(res,req)=>{

        console.log(res,req);

      })

    }

  },

  mounted() {

    AMapLoader.load(this.AMapLoader).then((AMap) => {

      //实例地图

      this.map = new AMap.Map("container", this.parameter);

      //实例逆向转码

      const Geocoder = new AMap.Geocoder();

      let that = this;

      this.map.on("click", function (e) {

        //根据获取到的经纬度进行逆地理编码

        that.reverse(Geocoder, e.lnglat.getLng(), e.lnglat.getLat());

        //根据获取到的经纬度进行正向地理编码

        that.limit(Geocoder,'北京市朝阳区阜荣街10号')

      });

      this.map.plugin("AMap.Geolocation", () => {

        var geolocation = new AMap.Geolocation({

          enableHighAccuracy: true, //是否使用高精度定位，默认:true

          timeout: 10000, //超过10秒后停止定位，默认：无穷大

          maximumAge: 0, //定位结果缓存0毫秒，默认：0

          convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true

          showButton: true, //显示定位按钮，默认：true

          buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角

          showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true

          showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true

          panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true

          zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

        });

        geolocation.getCurrentPosition(function (status, result) {

          if (status == "complete") {

            const {

              position: { lng, lat },

            } = result;

            // 根据获取到的经纬度进行逆地理编码

            that.reverse(Geocoder, lng, lat);

          }

        });

      });

    });

  },

};

</script>

<style>

#container {

  width: 1000px;

  height: 500px;

}

</style>

最终效果图