“百度地图vue-baidu-map” VS ”高德地图vue-amap”

一、一个需求

一个web项目中对在线电子地图有两个需求：
1、在地图上点击，可以获取到点击地区的行政区划代码
2、根据指定单位名称在地图上能够自动定位

二、郁闷的解决方案

首先我选用了百度地图在vue里的组件vue-baidu-map，安装使用都非常方便，文档也比较全，可以满足需求2，但不能满足需求1。其对于需求1的实现方式是，获取到鼠标单击地点的行政区划中文名称，然后通过百度提供的“百度地图行政区划adcode映射表”，从中自行根据中文名称查找对应的行政区划代码。

后来想起笔者用过高德地图在cordova中的组件，记得可以直接获取到行政区划代码，于是安装了高德地图在vue中的组件vue-amap，由于这是饿了么开源的一个组件，所以其在quasar中的使用资料非常少，好不容易搞定了其可以在quasar中的使用，发现可以满足需求1，但不能完全满足需求2。其对于需求2的实现方式，只能查询指定地址所在的坐标，然后进行定位，如果直接通过单位名称，虽然也可以查到坐标，但有比较大的偏移，即定位到的地图上的单位名称和实际的单位名称不同（因为偏移掉了，指到另外一个地点上的单位）。

现在要同时满足以上两个需求，您说我应该选用哪个组件？？？

（笔者最终选用的高德地图，因为通过修改功能需求，高德地图勉强能够同时满足以上两个需求）

三、vue-baidu-map

    这个组件在网上资料很多，可以非常方便的在quasar中使用，本文就不赘述了。

四、vue-amap

    这个组件的资料网上比较少，尤其是在quasar中的使用经验介绍更加少，所以本文详细介绍下这方面内容。

1、安装

    这个组件的资料在这里可以找到，不过其上API、示例等介绍都非常简单，这方面详细内容还得到高德官网的高德开放平台上具体查询使用。

    和其它VUE组件一样的安装方法，在quasar项目目录里执行如下命令即可：

npm install vue-amap --save

2、申请KEY

高德地图在WEB端、Android、IOS三种应用需要分别申请KEY，Android、IOS的KEY的申请可以参见《基于cordova-amap-location插件的高德地图定位实现》，WEB端的申请方式参见下图即可：

3、加载

    在/src/router/index.js文件中增加如下代码，以将组件加载应用中：

import VueAMap from 'vue-amap'   
 Vue.use(VueAMap) 
VueAMap.initAMapApiLoader({
      key: 'WEB服务的KEY值',
      plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType','AMap.Geocoder'],   //使用的插件必须首先在此注册，否则在使用时会出现不稳定，甚至直接出错
       v: '1.4.4',
        uiVersion: '1.0'     //UI的版本号，直接增加了这一样才能使用其所提供的UI组件
}) 

4、使用

     以下是一个测试可以用的示例程序，在此基础上参照官网上的API和示例，就可以开发出更多需求的高德地图应用：

    以上功能在实现了加载高德地图后，还将指定地点“江苏省南京市中山北路200-2号”设置为当前地图的中心。这个示例功能的另外一个特色就是实现了地图全屏展示，可以借鉴一下代码中的实现方式。

五、简单总结

1、百度地图的vue组件，安装使用都比较简单，实现代码也简洁、直观。正常情况下推荐使用这个组件。

2、高德地图的vue组件，如果在ElementUI框架使用会比较方便，如果在quasar等UI前端界面框架下使用就有些小麻烦。