quasar上高德地图vue-amap组件应用攻略：基础篇

在quasar应用中以电子地图作为主界面是一种很好的交互界面探索，笔者选用高德地图的vue-amap组件，具体原因参见“百度地图vue-baidu-map” VS ”高德地图vue-amap”。

一、安装

在上文中已有详细描述，本文略过。

二、加载

在上文中已有描述，但就其中的plugin参数补充说明如下：

1、哪些需要注册

对于使用到的类，需要事先到高德开放平台查询参考手册中的相关说明，如果注明了该类是插件（如下图所示），则就必须在plugin后面添加，否则就不需要加到plugin中。（当然，对于没有注册到plugin后的插件，其实也可用，但就是不稳定，有时候会出现莫名其妙的无法加载错误，所以为了稳定使用，请务必将使用到的插件都在plugin后进行注册）

     2、关于版本号

笔者刚开始配置的版本号是：v：1.4.4，基本功能都能正常使用
但在使用点聚合AMap.MarkerCluster插件时，始终无法使用，后来将版本号修改为2.0，就能正常使用了。

三、添加地图容器

   以上div就是地图容器，如果不做配置，div尺寸最小化，因此在屏幕上看不到。为了让地图最大化的显示出来，做了如下配置：
    1、div的宽度设置为100%，即map_parm.width=100%
    2、div的高度不能设置为100%，只能设置为固定高度，否则无法显示，为了确保高度为满屏，引入了组件q-window-resize-observable监控窗口大小变化
     3、onResize的代码如下：

onResize(size) {
    this.map_parm.height = size.height - 30 + "px";   //此处30是最顶部的标题栏高度
 },

四、初始化

在使用地图前，需要进行初始化，该初始化方法通过在mounted内触发运行，该方法具体包含如下逻辑：

1、创建地图实例AMap.Map

this.sys_map = new window.AMap.Map('container', {
    resizeEnable: true,
     zoom: this.map_parm.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' });

此处把地图实例赋值给全局变量sys_map，是因为其他方法中需要用到该实例。

2、创建编码服务接口AMap.Geocoder

this.sys_geocoder = new window.AMap.Geocoder({ 
    radius: 1000, 
    //city:"010" ,      //指定进行编码查询的城市，支持传入城市名、adcode 和 citycode 
    extensions: "all" });

    根据详细地址获取到所在经纬度坐标，根据经纬度坐标获取所属地市、区县、街道、门牌号码等详细信息，就需要使用到该组件。

3、启用地图左键单击事件侦听click

this.sys_map.on('click', function(e) {
     that.cur_point.lng = e.lnglat.getLng();
     that.cur_point.lat = e.lnglat.getLat();
     。。。。。。。
 });

一般不会定义针对整个地图的click事件侦听，但会定义针对marker的click事件侦听。

4、启用地图右键单击事件侦听rightclick

this.sys_map.on('rightclick', function(e) {     
     that.cur_point.lng = e.lnglat.getLng();     
     that.cur_point.lat = e.lnglat.getLat();     
     。。。。。
});

右键侦听事件一般用于右键菜单，或者右键弹出信息窗体显示点击所在地址的相关信息。

5、创建信息窗体实例AMap.InfoWindow

this.sys_infoWindow = new window.AMap.InfoWindow({
       isCustom: true,
       content: document.getElementById("info"),
       closeWhenClickMap: true,
       offset: new window.AMap.Pixel(13, -13)
 });
 this.sys_infoWindow.open(this.sys_map, [0, 0]);
 setTimeout(() => { this.sys_infoWindow.close(); }, 50);

地图内只能有一个信息窗体，但在每次open前可以修改信息窗体内的内容。
为了灵活性，以上代码中信息窗体内容是对应一段html，放在