前言

目前市面上有很多类型的导航地图，比如百度地图、腾讯地图、谷歌地图等等，因为要运用到公司的项目中，所以我们在项目初期就要从各个方面来合理地选择一个符合需求的导航地图，避免在日后的开发中，因为地图的精确度不够或者实效性不高，出现各种问题，如无法实时更新信息，导致地图显示错误等，到时候再腾出时间来更换地图的话，不仅耗时耗力，还会占用我们宝贵的时间。

本篇解决问题

本篇文章通过以下几个方面进行开展讲述，如果已经对各类导航地图的开发有深入了的话，可以跳过。

  • 目前国内外地图所参考的坐标系大致分为几类？
  • 为什么选用高德地图来构建地图？
  • 高德地图的原生 SDK 的简单运用
  • 如何在vue项目中使用高德地图？

国内外地图参考坐标的问题

首先让我们来了解一下目前导航地图的开发坐标问题

当前国内外地图参考系大致分为三种
**

  • WGS84坐标系（大地坐标系统）
    直接从 GPS 获取器中取出的原始数据，国际地图供应商使用的坐标系。但是在中国，有政策规定任何一个地图产品都不得使用 GPS 坐标，据说是为了保密。所以国内使用率为0，而国外 google 地图、H5 浏览器使用的都是WGS参考系。
  • GCJ-02火星坐标系（国测局坐标系）
    中国标准，国行GPS产品获取到的数据使用的坐标，国家规定： 国内出版的各种地图系统（包括电子形式），必须至少采用GCJ-02对地理位置进行首次加密，目前使用火星坐标系的地图商：腾讯地图、搜狐搜狗地图、阿里云地图、高德地图等。
  • BD-09百度坐标系

     百度坐标是在火星坐标上进行了二次加密，只有特定的公司才会使用。本身地图的定位就有偏差，百度又在上面      
     进行了二次编辑，误差再一次被放大。目前使用这个标准的只有百度地图自己了。**
**
当然还有存在着别的坐标系，比如 CGCS2000 坐标系（国家大地坐标系），搜狗坐标系（搜狗地图专用），图吧坐标系（图吧地图）等等，因为这些地图使用的范围不是很大，就不一一介绍了。
**
三种坐标系转换情况

地图参考系的对比及高德地图的初步应用-Skywen天问信息

这里做了一个小测试，随意选取了一个地点进行定位，从各个地图所显示的经纬度可以看出细微的差别，谷歌地图和腾讯高德之间的差别可以说是省略不及，但是百度地图相较于其他三项来说，就有明显的差距了，纬度和纬度分别从小数点第三位和小数点第二位开始出现偏差。

地图参考系的对比及高德地图的初步应用-Skywen天问信息

综上所述，三种坐标系的数据相对于真实位置对比来说，百度坐标的偏差相对较大，火星坐标还好一点，所以最好选择以火星坐标为参考的导航地图来开发，比如高德地图、腾讯地图等，如果项目对定位要求不是很高的话，可以考虑选择百度地图。

选用高德地图的原因

高德地图是阿里巴巴旗下的一个子项目，毕竟大厂出来的项目就是不一样，它的使用率和项目更新速度是不言而喻的。当然，对于其它数字地图供应商来说，它也是最熟悉中国的路面状况，覆盖了全球200+个国家和地区，有着丰富的地图绘制能力，7大类44种地图元素可以自定义绘制...这些都是官方语言，对于我们开发而言，好用、高效、更新快才是硬道理，最主要的还是一份地图可以运用于Web、Android和ios三个端，能实时更新地图数据，那就已经非常不错了。

在GPS定位上，上面也说过了，高德地图选用的是火星坐标系，好感度再次提升。

高德地图原生 SDK 的运用

准备工作

你需要一个key值，这里的key就是所谓的密钥，可以在高德地图开放平台免费申请获取。

高德地图每个端口的key值是完全不一样的，分很多种类型：ios平台、Andriod平台、Web端（JS API）、Web服务、微信小程序，我在做项目的时候，原来以为只存在一个key值，傻傻地画地图画了半天，才发现页面一片空白的原因，问了后端小哥哥才知道，我用的一直都是 App 端的key值，所以这里很关键！你一定要问清楚他们给你的key值是适用于哪个平台的。

接下来就是无脑引入相关的依赖文件，首先需要在index.html引入官方样式表。

<!--样式表-->
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

如果你需要进行移动端开发，就要在index.html页面的head标签内添加viewport设置，让网页的宽度自动适应手机屏幕的宽度，以达到最佳的绘制性能。这里设置的是页面初始缩放比例为1，用户不可以调整缩放比例。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

画一个简单地图

首先我们需要了解一个地图对象完整的生命周期，它主要分为三个部分：创建、存在和销毁，即：

  • 创建地图对象
  • 地图加载完成
  • 销毁地图对象

创建地图对象时，你需要一个div作为地图的容器，并且指定一个唯一的id属性。

注：div一定要表明宽高，要不然地图会显示不出来；页面可以创建多个容器，创建多个地图

<div id="container" style="width:500px; height:300px"></div>

**
接着需要在body里面引入官方指定的js文件。

<!-- 用于创建地图-->
<script src="https://webapi.amap.com/maps?v=1.4.13&key=申请到的key值"></script>
<!--引入官方js文件-->
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>

构建一个简单的地图，需要构造一个Map类的实例，并设置一定的初始化参数来设置地图的初始状态，比如地图层级、中心点位、视图模式等，更多的地图参数详见高德地图开放平台文档，这里只介绍简单且必要的几个属性。

 var map = new AMap.Map('container', {
   resizeEnable: true, //是否监控地图容器尺寸变化
   zoom:11, //初始化地图层级
   center: [116.397428, 39.90923], //初始化地图中心点
   viewMode:'3D'//使用3D视图
 });

当创建地图对象后，页面开始加载地图资源，地图加载完成后会触发 complete 事件，如果想要执行一些函数，用于加载页面其余的数据，那么就需要在 complete 函数内去执行。

map.on('complete', function(){
    // 地图图块加载完成后触发
});

如果调用 destroy 方法就会销毁地图。一旦这个方法执行后，地图对象就会被注销，释放内存，清空刚刚我们建立的地图容器。

map.destroy( );

效果图如下：

地图参考系的对比及高德地图的初步应用-Skywen天问信息

vue项目使用高德地图
     
目前高德地图的官方文档中，只介绍了如何使用原生的js运用方法，但是在这个vue横行的世界里，如果还是用原生的js来写页面，你就over了，好在前辈们早就踩过坑，给我们铺好了路，所以随手一挥，就能轻而易举的找到一个组件，来轻易的解决这个问题。

vue-amap 是基于 Vue 2.x 与高德的地图组件，它拥有自己的开发文档，不同于其他个人创建的小组件，文档且使用率相当不错，能够抛开高德原生 SDK 覆盖大多数场景，但对于部分定制化程度较高的场景而言，可能还是需要引入高德原生 SDK 来支持。

所以对研究高德地图官方开发文档不熟悉的新手来说，是个非常不错的入手组件，因为我们无需关心地图的具体操作，只需要简单地理解 vue-amap 组件的构造就好。

vue-amap组件的简单运用

1.安装组件vue-amap

npm install -S vue-amap

2.引入组件

首先需要在main.js里面引入 vue-amap 组件，初始化组件，可以在 plugin 数组内选择性引入相关的插件，并指定引入高德地图 SDK 的版本号，方便兼容 vue 不同版本

import VueAMap from 'vue-amap';
Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
  key: '申请到的key值',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],
  v: '1.4.4'
});

3.构建基础地图

构建一个简单的地图对象，只需要 引入 el-amap 标签，并指定该地图容器的 ID（vid）就可以了，另外还可以设置其他的静态属性（仅且可以初始化配置，不支持响应式）和动态属性（支持响应式），并在地图中加入中心定位标记，方便用户识别地点。

<el-amap class="amap-box" :vid="'amap-vue'"></el-amap>

一般在绘制自定义地图的时候，都会让用户进行地名的搜索，那么需要在地图中加入搜索标签 el-amap-search-box ，这里可以设置当用户输入完关键词以后，执行搜索函数，匹配地图中有关的地点，给出相应的数据。

<el-amap-search-box
                    :search-option="searchOption"
                    :on-search-result="onSearchResult"
                    ></el-amap-search-box>

4.效果图如下：

地图参考系的对比及高德地图的初步应用-Skywen天问信息

小结

高德地图开放平台对于新手来说，深入研究的时间还需要更多，选用一款稳定且还在更新的组件来说，是个不错的选择，这个选择主要看个人，有更好的想法的话，会继续在这里跟大家分享。

/个人介绍/

两年软件开发经验，了解vue/react/Jquery/javasript/PHP，对vue/Jquery有一定的研究，欢迎QQ交流1187851948

地图参考系的对比及高德地图的初步应用-Skywen天问信息