一、一个需求
一个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和示例，就可以开发出更多需求的高德地图应用：
<template>
<div>
<q-window-resize-observable @resize="onResize" />
<!--这是一个全屏地图-->
<div id="container" :style="{width:mapinfo.width,height:mapinfo.height}"></div>
</div>
</template>
<script>
export default {
data() {
return {
mapinfo: {
center: { lng: 113.27, lat: 23.13 },
zoom: 12,
width: '100%',
height: '400px'
},
sys_geocoder: {}, //地理编码对象
sys_map: {}, //地图对象
}
},
methods: {
initsystem() {
this.mapGet();
this.set_mappoint("江苏省南京市中山北路200-2号");
},
onResize(size) {
//确保高度是全屏
this.mapinfo.height = size.height - 68 + "px";
},
mapGet() {
this.sys_map = new window.AMap.Map('container', {
resizeEnable: true,
zoom: 15,
showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
keyboardEnable: true, // 地图是否可通过键盘控制，默认为true
doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
zoomEnable: true, // 地图是否可缩放，默认值为true
rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false viewMode: '3D'
});
this.sys_geocoder = new window.AMap.Geocoder({
radius: 1000,
//city:"010" , //指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
extensions: "all"
});
//显示单击的地址信息
this.sys_map.on('click', (e) => {
let lngMain = e.lnglat.getLng();
let latMain = e.lnglat.getLat();
this.sys_geocoder.getAddress([lngMain, latMain], function(status, result) {
if (result.regeocode.addressComponent.adcode) {
console.log(result.regeocode.addressComponent); }; }); });
},
set_mappoint(s_address) {
this.sys_geocoder.getLocation(s_address, (status, result) => {
if (result.geocodes) {
if (result.geocodes.length > 0) {
let lngMain = result.geocodes[0].location.getLng();
let latMain = result.geocodes[0].location.getLat();
this.sys_map.setCenter([lngMain, latMain]); //设置地图中心点
}; }; }); },
},
mounted() {
this.initsystem();
},
watch: {},
}
</script>
<style>
</style>
以上功能在实现了加载高德地图后，还将指定地点“江苏省南京市中山北路200-2号”设置为当前地图的中心。这个示例功能的另外一个特色就是实现了地图全屏展示，可以借鉴一下代码中的实现方式。
五、简单总结
1、百度地图的vue组件，安装使用都比较简单，实现代码也简洁、直观。正常情况下推荐使用这个组件。
2、高德地图的vue组件，如果在ElementUI框架使用会比较方便，如果在quasar等UI前端界面框架下使用就有些小麻烦。
