高德坐标计算距离偏差多少是正常的 高德坐标系

简单叙述

首先需要了解一个小细节： 就是定位获取到的坐标，直接在地图组件或者在位置标注中使用的时候，位置可能有一定的偏差。
还有一个点需要注意的就是： 微信开发者工具的定位不准确，无法获取想要的位置。

为了安全，经纬度一般都进行了加密
地球上同一个地理位置的经纬度，在不同的坐标系中，会有少于偏移，国内目前常见的坐标系主要分为三种：

1. 地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。
2. 火星坐标系——GCJ-02：中国国内使用的被强制加密后的坐标体系，高德坐标就属于该种坐标体系。
3. 百度坐标系——BD-09：百度地图所使用的坐标体系，是在火星坐标系的基础上又进行了一次加密处理。

因此在使用不同坐标系前，我们需要使用 AMap.convertFrom() 方法将这些非高德坐标系进行转换。

除此之外，key 值需要注意一下，申请的时候弄清楚自己的使用场景，不然 key 值无效

组件引入教程

在 index.html 引入高德地图

<script src="https://webapi.amap.com/maps?v=2.0&key=申请到的 key 值"></script>

这边我直接写死，而不是配置到配置文件中。因为我在调用接口的时候发现。从配置文件中读取请求解析的时候会直接多带一个 ’ （单引）号。

写一个简单的组件

组件只有展示定位位置的功能。具体调用我就不展示了。
官方的文档： https://lbs.amap.com/api/jsapi-v2/guide/abc/plugins
官方一些类的参数说明： https://lbs.amap.com/api/jsapi-v2/documentation#geocoder

<template>
  <div id="amap-container">
    <div id="searchResultPanel" />
    <el-row class="margin-top-10 address">
      {{ this.defaultValue.formattedAddress }}
    </el-row>
    <div id="container" />
  </div>
</template>

<script>
const AMap = window.AMap;
export default {
  name: 'AMap',
  props: {
    defaultValue: {
      formattedAddress: '',
      longitude: '',
      latitude: ''
    }
  },
  data() {
    return {
      map: '',
      marker: '',
    };
  },
  mounted() {
    // 初始化地图页面
    this.initMap();
  },
  beforeDestroy() {
    // 销毁地图
    this.map.destroy();
  },
  methods: {
    //   初始化地图页面
    initMap() {
      // 地图初始化应该在地图容器div已经添加到DOM树之后
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        //center: [118.826087, 32.017401],
        center: [this.defaultValue.longitude, this.defaultValue.latitude],
        zoom: 18
      });
      // 添加工具栏
      this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
        // 工具条
        const toolbar = new AMap.ToolBar();
        // 比例尺
        const scale = new AMap.Scale();
        this.map.addControl(toolbar);
        this.map.addControl(scale);
      });

      // 添加maker
      this.setMaker();
      //添加点标记
      this.setText()
    },
    // 添加maker
    setMaker() {
      var marker = new AMap.Marker({
        position: new AMap.LngLat(this.defaultValue.longitude, this.defaultValue.latitude),
        // icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        // anchor: 'bottom-center',
      });
      this.map.add(marker);
      // 添加解析地理位置插件
      this.map.plugin('AMap.Geocoder', () => {
        // 异步加载插件
        this.geocoder = new AMap.Geocoder({
          city: this.defaultCity, // 默认：“全国”
          //radius: 1000 // 范围，默认：500
        });
      });
    },
    setText() {
      var text = new AMap.Text({
        position: new AMap.LngLat(this.defaultValue.longitude, this.defaultValue.latitude),
        //anchor: 'bottom-center',
        text: this.defaultValue.formattedAddress,
      });
      this.map.add(text);
    }
  }
};
</script>

<style lang="scss">
  #amap-container {
    .el-input__clear {
      line-height: 34px;
      // top: 20px;
    }
    #container {
      height: 40vh;
      width: 80%;
      margin-top: 10px;
      border: 1px solid #ccc;
    }
    .input-with {
      // position: fixed;
      // top: 40px;
      z-index: 1;
      width: 100%;
    }
    .address {
      color: #373737;
    }
  }
  .amap-sug-result {
    z-index: 99999;
  }
</style>

效果图如下