在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、组件丢失问题
笔者发现过几次刷新页面后组件丢失，导致功能无法正常使用，重新刷新后又恢复正常了。这种问题比较影响用户体验，具体解决办法，笔者还在完善中。
网友评论