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

一、安装

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

二、加载

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

1、哪些需要注册

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

     2、关于版本号

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

三、添加地图容器

<template>
   <q-window-resize-observable @resize="onResize" />
    <div id="container" :style="{width:map_parm.width,height:map_parm.height}"></div>
</template>

   以上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，放在<template>里，为了放置前不该显示的显示出来，所以有了上面代码中的最后两行（呵呵，比较愚蒙的方法）.
这个html的代码示例参见如下：

<div id="info" class="custom-info input-card content-window-card">
     <div id="top" class="info-top">
         <div id="titleD"> {{cur_point.address}} </div>
         <img id="closeX" src="statics/close2.gif" @click="closeInfoWindow"> </div>
     <div id="middle" class="info-middle" style="backgroundColor:white;">
           <img src="statics/add.png" style="width:100px;height:100px;" @click="addReport(2)">
             地市：{{cur_point.city}}<br />
             区县：{{cur_point.district}}（{{cur_point.adcode}}）<br />
             乡镇街道：{{cur_point.township}}<br />
              路名：{{cur_point.street}}<br />
              门牌号：{{cur_point.streetNumber}}<br />
             周边道路：{{cur_point.roads}} </div>
            <div id="bottom" class="info-bottom" style="position:relative;top:0px;margin:0 auto;"> <img id="sharp" src="statics/sharp.png"> </div> </div>

  以上代码中的class非常重要，否则会影响使用，需要的朋友可以在评论区留言。

6、设置地图中心点

this.set_mapcenter(this.cur_cityname);

此处是调用一个方法进行地图中心点的设置，具体中心点是根据所提供的一个单位名称，最好是详细地址。
set_mapcenter的代码如下：

set_mapcenter(s_address) {
     let that = this;
      this.sys_geocoder.getLocation(s_address, (status, result) => {
             if (result.geocodes) {
                   if (result.geocodes.length > 0) {
                         that.map_parm.center.lng = result.geocodes[0].location.getLng();
                          that.map_parm.center.lat = result.geocodes[0].location.getLat();
                           that.sys_map.setCenter(Object.values(that.map_parm.center)); 
                     };
             };
      });
 },

五、事件处理

将以上初始化中涉及到的方法、事件补充完成，大概效果如下：

注意：上图中的工具栏、聚合点本示例中未提供代码。

六、几个注意事项

1、地图全屏问题
地图容器一定要设置具体的高度，否则地图高度就成为0%，即显示不出来。
2、初始化、事件处理、全局参数的界定问题
map类在初始化方法中实例化，不能重复实例化。
如果在其他方法、事件中需要使用map实例，则地图实例必须定义为全局参数。
3、this的作用域问题
在函数体内如果要使用父类中的方法，则需要区分this的作用域，否则很容易导致错误，而且这种错误比较难排查。
4、组件丢失问题
笔者发现过几次刷新页面后组件丢失，导致功能无法正常使用，重新刷新后又恢复正常了。这种问题比较影响用户体验，具体解决办法，笔者还在完善中。