如何实现一个地图库封装，可以快速切换地图

前言

日前在公司负责的主要业务是gis开发相关，现在使用的是百度地图，百度地图相比高德地图总有些缓慢、卡顿、因此才想到了这个方案。实现一个自己的库，可以快速切换百度地图与高德地图。

思路

有了上面这个需求，我们就在考虑这个需求涉及到的功能点，然后如何去实现它。

  一：配置项，一键配置可以选择加载。比如maptype=1：加载百度地图，maptype=2：加载高德地图
  二：百度如何平滑切换到高德  
  三：百度提供的构造函数与map下的方法如何兼容高德

最初架构

有了上述需求和思路，接下来就是使用代码来实现，首先我想到的是，既然是一个库，那肯定要避免全局变量污染，还有就是可拓展性要强，代码整体性能要高。

/** * 作者：java-script@qq.com * 时间：2018-03-14 * 描述：百度与高德地图简单封装实现快速切换 * 版本：1.0.0.1 * * */
;(function(){
	'use strict';
	var arg = arguments,
		win = arg[0] || window,
		mapLsit = arg[1] || [];
		
})(window,[function(){
	
},function(){
	
}]);

上述架构只是一个立即执行函数，两个参数，第一个是window对象，第二个是数组，数组内是两个函数。第一个函数是//百度地图相关方法封装，第二个函数是//高德地图相关方法封装，也许以后还有实现腾讯地图封装。所有这里可以很简单的拓展。

总体代码

这是总体代码设计，代码还不是很完善，有的控件需要单独封装成工具，有的百度地图提供的插件高德没有提供，需要自己手写。比如下面都有自己手写的在地图上拉框进行搜索。拉框完毕触发回调，返回你拉框的区域位置，你可以在回调中处理你相关操作。

/** * 作者：java-script@qq.com * 时间：2018-03-14 * 描述：百度与高德地图简单封装实现快速切换 * 版本：1.0.0.1 * * */
;
(function() {
	'use strict';
	var arg = arguments,
		win = arg[0] || window,
		mapLsit = arg[1] || [];

	//console.log(mapLsit);

	/** * 挂载window * */
	var map = win.Gis_Map = {};
	/** * 配置项 * */
	map.config = {
		maptype: 0, //0:代表百度地图，1：高德地图，2：腾讯地图
	};
	//地图实例之后的所有方法
	map.pulic = {

	};
	/** * 主函数 * * */
	map.init = function() {
		main();
	};
	/** * 根据配置文件选择加载相应的地图 * * */
	function main() {

		switch(map.config.maptype) {
			case 0:
				casemap(0);
				break;
			case 1:
				casemap(1);
				break;
			case 2:
				casemap(2);
				break;
			default:

		};
		/** * 选择加载 * @n {number} 根据类型加载地图 * * */
		function casemap(n) {
			var fn = null;
			if(mapLsit.length) {
				fn = mapLsit[n];
				mapLsit = null;
				fn.call(map);
				//console.log(fn.call(map),'加载百度地图成功！');
			}
		}
	}

	/** * 把地图实例的方法进行统一 * @n {number} 0:代表百度地图，1：代表高德地图 * */
	map.setpulic = function(n) {
		var map_pulic = this.pulic;
		if(n === 0) {

		} else if(n === 1) {
			//兼容高德设置中心点位与缩放大小
			/** * @point {point} 点位 * @level {number} 缩放大小等级 * */
			map_pulic.centerAndZoom = function(point, level) {
				this.setZoomAndCenter(level, point);
			}
			/** * 启用缩放 * * */
			map_pulic.enableScrollWheelZoom = function() {

			}
			//兼容高德的绑定事件
			map_pulic.addEventListener = map_pulic.on;
			//兼容高德的添加覆盖物
			map_pulic.addOverlay = map_pulic.add;
			//清除 覆盖物
			map_pulic.removeOverlay = map_pulic.remove;
			//获取两点间距离 需要插件提供 
			//map_pulic.getDistance=

			//关闭window 窗体 
			map_pulic.closeInfoWindow = map_pulic.clearInfoWindow;

			/** * 地图经纬度坐标转换为平面地图像素坐标 * lnglatToPixel * @point {Point} 点位 * */
			map_pulic.pointToPixel = function(point) {
				return map_pulic.lnglatToPixel(point, 10);
			}

			/** * 获取两点间的距离 * @start {Point} 开始点位 * @end {Point} 结束点位 * */
			map_pulic.getDistance = function(start, end) {
				return start.distance(end);
			}
		}
		//console.log(map_pulic,'map_pulic');

	}

})(window, [function() {
	'use strict';
	//百度地图相关方法封装
	if(!BMap) {
		console.error('请检查config配置项与加载的地图js是否正确!');
		return;
	}
	//验证数据类型
	var _toString = Object.prototype.toString;
	/** * 在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作 * @container {String | HTMLElement} * @opt { * 属性 类型 描述 minZoom Number 地图允许展示的最小级别 maxZoom Number 地图允许展示的最大级别 mapType MapType 地图类型，默认为BMAP_NORMAL_MAP enableHighResolution Boolean 是否启用使用高分辨率地图。在iPhone4及其后续设备上，可以通过开启此选项获取更高分辨率的底图，v1.2,v1.3版本默认不开启，v1.4默认为开启状态 enableAutoResize Boolean 是否自动适应地图容器变化，默认启用 enableMapClick Boolean 是否开启底图可点功能，默认启用 PanOptions * } 此类表示Map构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。 * */
	this.Map = function(container, opt) {
		var that = this.pulic = new BMap.Map(container, opt);
		//触发实例方法进行重写
		this.setpulic(0);
		return that;
	}
	/** * 创建点位 * @lng {Number} 地理经度 * @lat {Number} 地理纬度 * */
	this.Point = function(lng, lat) {
		return new BMap.Point(lng, lat); //创建点位
	}
	/** * 创建圆 * * @center {点位坐标 Point } 以指定的经度和纬度创建一个地理点坐标 * @radius {Number} 半径单位米 * @opts { * strokeColor String 圆形边线颜色 fillColor String 圆形填充颜色。当参数为空时，圆形将没有填充效果 strokeWeight Number 圆形边线的宽度，以像素为单位 strokeOpacity Number 圆形边线透明度，取值范围0 - 1 fillOpacity Number 圆形填充的透明度，取值范围0 - 1 strokeStyle String 圆形边线的样式，solid或dashed enableMassClear Boolean 是否在调用map.clearOverlays清除此覆盖物，默认为true enableEditing Boolean 是否启用线编辑，默认为false enableClicking Boolean 是否响应点击事件，默认为true * } * * */
	this.Circle = function(center, radius, opts) {
		return new BMap.Circle(center, radius, opts);
	}
	/** * 创建一个图像标注实例。point参数指定了图像标注所在的地理位置 * @point {点位坐标 Point} 以指定的经度和纬度创建一个地理点坐标 * @opts { * offset Size 标注的位置偏移值 icon Icon 标注所用的图标对象 enableMassClear Boolean 是否在调用map.clearOverlays清除此覆盖物，默认为true enableDragging Boolean 是否启用拖拽，默认为false enableClicking Boolean 是否响应点击事件。默认为true raiseOnDrag Boolean 拖拽标注时，标注是否开启离开地图表面效果。默认为false draggingCursor String 拖拽标注时的鼠标指针样式。此属性值需遵循CSS的cursor属性规范 rotation Number 旋转角度 shadow Icon 阴影图标 title String 鼠标移到marker上的显示内容 * } * */
	this.Marker = function(point, opts) {
		return new BMap.Marker(point, opts);
	}
	/** * 创建折线覆盖物对象 * @points {Array<Point>} 点位数组 * @opts { * strokeColor String 折线颜色 strokeWeight Number 折线的宽度，以像素为单位 strokeOpacity Number 折线的透明度，取值范围0 - 1 strokeStyle String 折线的样式，solid或dashed enableMassClear Boolean 是否在调用map.clearOverlays清除此覆盖物，默认为true enableEditing Boolean 是否启用线编辑，默认为false enableClicking Boolean 是否响应点击事件，默认为true icons Array<IconSequence> 配置贴合折线的图标 * } * */
	this.Polyline = function(points, opts) {
		return new BMap.Polyline(points, opts);
	}
	/** * 以给定的图像地址和大小创建图标对象实例 * @url {String} url地址 * @size {Size} 大小 * @opts { * anchor Size 图标的定位锚点。此点用来决定图标与地理位置的关系，是相对于图标左上角的偏移值，默认等于图标宽度和高度的中间值 imageOffset Size 图片相对于可视区域的偏移值 infoWindowAnchor Size 信息窗口定位锚点。开启信息窗口时，信息窗口底部尖角相对于图标左上角的位置，默认等于图标的anchor printImageUrl String 用于打印的图片，此属性只适用于IE6，为了解决IE6在包含滤镜的情况下打印样式不正确的问题 * } * */
	this.Icon = function(url, size, opts) {
		return new BMap.Icon(url, size, opts);
	}
	/** * 以指定的宽度和高度创建一个矩形区域大小对象 * @width {Number} 水平方向的数值 * @height {Number} 竖直方向的数值 * */
	this.Size = function(width, height) {
		return new BMap.Size(width, height)
	}
	/** * Autocomplete是结果提示、自动完成类。 * @options { * location String | Map | Point 设定返回结果的所属范围。例如“北京市” types Array<String> 返回数据类型。两种设置方式，第一种为默认值（即设置值为空），将返回所有数据。如地图初始化为北京，在输入框中输入“小”，输入框下会出现包含“小”关键字的多种类型（如餐饮、地名等）的提示词条。第二种设置值为"city"，将返回省市区县乡镇街道地址类型数据。如地图初始化为北京，在输入框中输入“小”，输入框下会出现“小金县”的地点名称类的提示词条 onSearchComplete Function 在input框中输入字符后，发起列表检索，完成后的回调函数。 参数：AutocompleteResult input String | HTMLElement 文本输入框元素或其id * } * */
	this.Autocomplete = function(options) {
		return new BMap.Autocomplete(options);
	}
	/** * 用于位置检索、周边检索和范围检索。 * @location {Map | Point | String} * @opts { * renderOptions LocalRenderOptions 结果呈现设置 onMarkersSet Function 标注添加完成后的回调函数。 参数： pois: Array，通过marker属性可得到其对应的标注 onInfoHtmlSet Function 标注气泡内容创建后的回调函数。 参数： poi: LocalResultPoi，通过其marker属性可得到当前的标注。 html: HTMLElement，气泡内的Dom元素 onResultsHtmlSet Function 结果列表添加完成后的回调函数。 参数： container: HTMLElement，结果列表所用的HTML元素 pageCapacity Number 设置每页容量，取值范围：1 - 100，对于多关键字检索，容量表示每个关键字的数量，如果有2个关键字，则实际检索结果数量范围为：2 - 200 onSearchComplete Function 检索完成后的回调函数。 参数：results: LocalResult或Array 如果是多关键字检索，回调函数参数返回一个LocalResult的数组，数组中的结果顺序和检索中多关键字数组中顺序一致 * } * */
	this.LocalSearch = function(location, opts) {
		return new BMap.LocalSearch(location, opts);
	}
	/** * 创建一个地址解析器的实例 * * */
	this.Geocoder = function() {
		return new BMap.Geocoder();
	}
	/** * 创建Geolocation对象实例 * * */
	this.Geolocation = function() {
		return new BMap.Geolocation();
	}
	/** * 此类表示地图上包含信息的窗口。 * * @content {string | HTMLElement} 创建一个信息窗实例，其中content支持HTML内容。1.2版本开始content参数支持传入DOM结点 * @opts { width Number 信息窗宽度，单位像素。取值范围：0, 220 - 730。如果您指定宽度为0，则信息窗口的宽度将按照其内容自动调整 height Number 信息窗高度，单位像素。取值范围：0, 60 - 650。如果您指定高度为0，则信息窗口的高度将按照其内容自动调整 maxWidth Number 信息窗最大化时的宽度，单位像素。取值范围：220 - 730 offset Size 信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标，在标注上打开的信息窗底端尖角的位置取决于标注所用图标的infoWindowOffset属性值，您可以为信息窗添加偏移量来改变默认位置 title String 信息窗标题文字，支持HTML内容 enableAutoPan Boolean 是否开启信息窗口打开时地图自动移动（默认开启） enableCloseOnClick Boolean 是否开启点击地图关闭信息窗口（默认开启） enableMessage Boolean 是否在信息窗里显示短信发送按钮（默认开启） message String 自定义部分的短信内容，可选项。完整的短信内容包括：自定义部分+位置链接，不设置时，显示默认短信内容。短信内容最长为140个字 } * */
	this.InfoWindow = function(content, opts) {
		return new BMap.InfoWindow(content, opts)
	}
	/** * 创建一个文本标注实例。point参数指定了文本标注所在的地理位置 * @content {String} 标题内容 * @opts { * offset Size 文本标注的位置偏移值 position Point 文本标注的地理位置 enableMassClear Boolean 是否在调用map.clearOverlays清除此覆盖物，默认为true * } * */
	this.Label = function(content, opts) {
		return new BMap.Label(content, opts);
	}
	/** * 打开window 窗体 * @infoWindow 实例化的 InfoWindow窗体 * @point {点位坐标 Point} 以指定的经度和纬度创建一个地理点坐标 * */
	this.openInfoWindow = function(infoWindow, point) {
		this.pulic.openInfoWindow(infoWindow, point);
	}
}, function() {
	'use strict';
	//高德地图相关方法封装
	if(!AMap) {
		console.error('请检查config配置项与加载的地图js是否正确!');
		return;
	}
	//验证数据类型
	var _toString = Object.prototype.toString;

	/** * 在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作 * @container {String | HTMLElement} * @opt { * * //百度提供的参数 * 属性 类型 描述 minZoom Number 地图允许展示的最小级别 maxZoom Number 地图允许展示的最大级别 mapType MapType 地图类型，默认为BMAP_NORMAL_MAP enableHighResolution Boolean 是否启用使用高分辨率地图。在iPhone4及其后续设备上，可以通过开启此选项获取更高分辨率的底图，v1.2,v1.3版本默认不开启，v1.4默认为开启状态 enableAutoResize Boolean 是否自动适应地图容器变化，默认启用 enableMapClick Boolean 是否开启底图可点功能，默认启用 //高德提供的参数 view View2D 地图视口，用于控制影响地图静态显示的属性，如：地图中心点“center” 推荐直接使用zoom、center属性为地图指定级别和中心点 （自v1.3 新增） layers Array 地图图层数组，数组可以是图层 中的一个或多个，默认为普通二维地图。当叠加多个图层时，普通二维地图需通过实例化一个TileLayer类实现（自v1.3 新增） zoom Number 地图显示的缩放级别，若center与level未赋值，地图初始化默认显示用户所在城市范围3D地图下，zoom值，可以设置为浮点数。（在V1.3.0版本level参数调整为zoom，3D地图修改自V1.4.0开始生效） center LngLat 地图中心点坐标值 labelzIndex Number 地图标注显示顺序，大于110即可将底图上的默认标注显示在覆盖物（圆、折线、面）之上。 zooms Array 地图显示的缩放级别范围在PC上，默认为[3,18]，取值范围[3-18]；在移动设备上，默认为[3,19],取值范围[3-19] lang String 地图语言类型可选值：zh_cn：中文简体，en：英文，zh_en：中英文对照默认为: zh_cn：中文简体注：由于图面内容限制，中文、英文 、中英文地图POI可能存在不一致的情况（自v1.3 新增） defaultCursor String 地图默认鼠标样式。参数defaultCursor应符合CSS的cursor属性规范 crs String 地图显示的参考坐标系，取值：'EPSG3857''EPSG3395''EPSG4326'自V1.3.0移入view对象中 animateEnable Boolean 地图平移过程中是否使用动画（如调用panBy、panTo、setCenter、setZoomAndCenter等函数，将对地图产生平移操作，是否使用动画平移的效果），默认为true，即使用动画 isHotspot Boolean 是否开启地图热点，默认false 不打开（自v1.3 新增） defaultLayer TileLayer 当前地图中默认显示的图层。默认图层可以是TileLayer.Satellite等切片地图，也可以是通过TileLayer自定义的切片图层（自v1.3 废弃） rotateEnable Boolean 地图是否可旋转，默认false。3D视图默认为true，2D视图默认false。（V1.3版本新增，3D视图自V1.4.0开始支持） resizeEnable Boolean 是否监控地图容器尺寸变化，默认值为false showIndoorMap Boolean 是否在有矢量底图的时候自动展示室内地图，PC端默认是true，移动端默认是false indoorMap IndoorMap 在展示矢量图的时候自动展示室内地图图层，当地图complete之后可以获取到该对象 expandZoomRange Boolean 是否支持可以扩展最大缩放级别,和zooms属性配合使用 设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20 dragEnable Boolean 地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制 zoomEnable Boolean 地图是否可缩放，默认值为true。此属性可被setStatus/getStatus 方法控制 doubleClickZoom Boolean 地图是否可通过双击鼠标放大地图，默认为true。此属性可被setStatus/getStatus 方法控制 keyboardEnable Boolean 地图是否可通过键盘控制,默认为true 方向键控制地图平移，"+"和"-"可以控制地图的缩放， Ctrl+“→”顺时针旋转，Ctrl+“←”逆时针旋转。此属性可被setStatus/getStatus 方法控制 jogEnable Boolean 地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制 scrollWheel Boolean 地图是否可通过鼠标滚轮缩放浏览，默认为true。此属性可被setStatus/getStatus 方法控制 touchZoom Boolean 地图在移动终端上是否可通过多点触控缩放浏览地图，默认为true。关闭手势缩放地图，请设置为false。 touchZoomCenter Number 可缺省，当touchZoomCenter=1的时候，手机端双指缩放的以地图中心为中心，否则默认以双指中间点为中心 mapStyle String 设置地图的显示样式，目前支持两种地图样式： 第一种：自定义地图样式，如"amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"可前往地图自定义平台定制自己的个性地图样式；第二种：官方样式模版,如"amap://styles/grey"。其他模版样式及自定义地图的使用说明见开发指南 features Array 设置地图上显示的元素种类 支持'bg'（地图背景）、'point'（POI点）、'road'（道路）、'building'（建筑物） showBuildingBlock Boolean 设置地图显示3D楼块效果，移动端也可使用。推荐使用。 viewMode String 默认为‘2D’，可选’3D’，选择‘3D’会显示 3D 地图效果。（自V1.4.0开始支持） pitch Number 俯仰角度，默认0，[0,83]，2D地图下无效 。（自V1.4.0开始支持） pitchEnable Boolean 是否允许设置俯仰角度，3D视图下为true，2D视图下无效。（自V1.4.0开始支持） buildingAnimation Boolean 楼块出现和消失的时候是否显示动画过程，3D视图有效，PC端默认true，手机端默认false。（自V1.4.0开始支持） skyColor String 调整天空颜色，配合自定义地图，3D视图有效，如‘#ff0000’。（自V1.4.0开始支持） * } 此类表示Map构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。 * */
	this.Map = function(container, opt) {
		var that = this.pulic = new AMap.Map(container, opt);
		//触发实例方法进行重写
		this.setpulic(1);
		return that;
	};
	/** * 创建maker覆盖物 * @point {点位坐标 Point} 以指定的经度和纬度创建一个地理点坐标 * @opts { * //百度参数 * offset Size 标注的位置偏移值 icon Icon 标注所用的图标对象 enableMassClear Boolean 是否在调用map.clearOverlays清除此覆盖物，默认为true enableDragging Boolean 是否启用拖拽，默认为false enableClicking Boolean 是否响应点击事件。默认为true raiseOnDrag Boolean 拖拽标注时，标注是否开启离开地图表面效果。默认为false draggingCursor String 拖拽标注时的鼠标指针样式。此属性值需遵循CSS的cursor属性规范 rotation Number 旋转角度 shadow Icon 阴影图标 title String 鼠标移到marker上的显示内容 //高德参数 map Map 要显示该marker的地图对象 position LngLat 点标记在地图上显示的位置，默认为地图中心点 offset Pixel 点标记显示位置偏移量，默认值为Pixel(-10,-34)。Marker指定position后，默认以marker左上角位置为基准点，对准所给定的position位置，若需使marker指定位置对准在position处，需根据marker的尺寸设置一定的偏移量。 icon String/Icon 需在点标记中显示的图标。可以是一个本地图标地址，或者Icon对象。有合法的content内容时，此属性无效 content String/Object 点标记显示内容，可以是HTML要素字符串或者HTML DOM对象。content有效时，icon属性将被覆盖 topWhenClick Boolean 鼠标点击时marker是否置顶，默认false ，不置顶 （自v1.3 新增） bubble Boolean 是否将覆盖物的鼠标或touch等事件冒泡到地图上 （自v1.3 新增） 默认值：false draggable Boolean 设置点标记是否可拖拽移动，默认为false raiseOnDrag Boolean 设置拖拽点标记时是否开启点标记离开地图的效果 cursor String 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor visible Boolean 点标记是否可见，默认为true zIndex Number 点标记的叠加顺序。地图上存在多个点标记叠加时，通过该属性使级别较高的点标记在上层显示 默认zIndex：100 angle Number 点标记的旋转角度，广泛用于改变车辆行驶方向 注：angle属性是使用CSS3来实现的，支持IE9及以上版本 autoRotation Boolean 是否自动旋转。点标记在使用moveAlong动画时，路径方向若有变化，点标记是否自动调整角度，默认为false。广泛用于自动调节车辆行驶方向。 IE8以下不支持旋转，autoRotation属性无效 animation String 点标记的动画效果，默认值： “AMAP_ANIMATION_NONE” 可选值： “AMAP_ANIMATION_NONE”，无动画效果 “AMAP_ANIMATION_DROP”，点标掉落效果 “AMAP_ANIMATION_BOUNCE”，点标弹跳效果 shadow Icon 点标记阴影，不设置该属性则点标记无阴影 title String 鼠标滑过点标记时的文字提示，不设置则鼠标滑过点标无文字提示 clickable Boolean 点标记是否可点击 shape MarkerShape 设置Marker的可点击区域，在定义的区域内可触发Marker的鼠标点击事件 extData Any 用户自定义属性，支持JavaScript API任意数据类型，如Marker的id等 label {content,offset} 添加文本标注，content为文本标注的内容，offset为偏移量，左上角为偏移量为（0,0） * } * */
	this.Marker = function(point, opts) {
		opts = opts || {};
		//opts.map=this.pulic;
		opts.position = point;
		AMap.Marker.prototype.addEventListener = AMap.Marker.prototype.on;
		return new AMap.Marker(opts);
	}
	/** * //百度的参数 * @url {String} url地址 * @size {Size} 大小 * @opts { * anchor Size 图标的定位锚点。此点用来决定图标与地理位置的关系，是相对于图标左上角的偏移值，默认等于图标宽度和高度的中间值 imageOffset Size 图片相对于可视区域的偏移值 infoWindowAnchor Size 信息窗口定位锚点。开启信息窗口时，信息窗口底部尖角相对于图标左上角的位置，默认等于图标的anchor printImageUrl String 用于打印的图片，此属性只适用于IE6，为了解决IE6在包含滤镜的情况下打印样式不正确的问题 * } * * //高德参数 * size Size 图标尺寸，默认值(36,36) imageOffset Pixel 图标取图偏移量。当image中指定了一个大图时，可通过size和imageOffset配合，显示图标的指定范围 image String 图标的取图地址。默认为蓝色图钉图片 imageSize Size 图标所用图片大小，根据所设置的大小拉伸或压缩图片，等同于CSS中的background-size属性。可用于实现高清屏的高清效果 * */
	this.Icon = function(url, size, opts) {
		opts = opts || {};
		url ? opts.image = url : "";
		opts.size = size;
		return new AMap.Icon(opts);
	}
	/** * 以指定的宽度和高度创建一个矩形区域大小对象 * @width {Number} 水平方向的数值 * @height {Number} 竖直方向的数值 * */
	this.Size = function(width, height) {
		return new AMap.Size(width, height);
	}
	/** * 创建点位 * @lng {Number} 地理经度 * @lat {Number} 地理纬度 * */
	this.Point = function(lng, lat) {
		return new AMap.LngLat(lng, lat);
	}

	/** * 创建一个地址解析器的实例 * */
	this.Geocoder = function() {
		if(!AMap.Geocoder) {
			console.error('使用高德地图Geocoder需要加载插件支持');
			return;
		}
		return new AMap.Geocoder({ lang: 'zh_cn' })
	}

	/** * @content {string | HTMLElement} 创建一个信息窗实例，其中content支持HTML内容。1.2版本开始content参数支持传入DOM结点 * @opts { isCustom Boolean 是否自定义窗体。设为true时，信息窗体外框及内容完全按照content所设的值添加（默认为false，即在系统默认的信息窗体外框中显示content内容） autoMove Boolean 是否自动调整窗体到视野内（当信息窗体超出视野范围时，通过该属性设置是否自动平移地图，使信息窗体完全显示） closeWhenClickMap Boolean 控制是否在鼠标点击地图后关闭信息窗体，默认false，鼠标点击地图后不关闭信息窗体 content String/HTMLElement 显示内容，可以是HTML要素字符串或者HTMLElement对象，自定义窗体示例 size Size 信息窗体尺寸（isCustom为true时，该属性无效） offset Pixel 相对于基点的偏移量。默认情况是信息窗体的底部中心点(BOTTOM_CENTER) 和基点之间的偏移量 position LngLat 信息窗体显示基点位置 （自v1.2 新增） showShadow Boolean Boolean 控制是否显示信息窗体阴影，取值false时不显示窗体阴影，取值true时显示窗体阴影 默认值：false } * */
	this.InfoWindow = function(content, opts) {
		opts = opts || {};
		opts.content = content;
		opts.isCustom = false;
		opts.size = this.Size(opts.width, opts.height);
		opts.showShadow = false;
		return new AMap.InfoWindow(opts)
	}
	/** * 使用 * @infoWindow 实例化的 InfoWindow窗体 * @point {点位坐标 Point} 以指定的经度和纬度创建一个地理点坐标 * */
	this.openInfoWindow = function(infoWindow, point) {
		infoWindow.open(this.pulic, point);
	}
	/** * 创建圆覆盖物 * @center {Point} 圆心 * @radius {Number} 半径米 * @opts { * //百度接收的参数 * strokeColor String 圆形边线颜色 fillColor String 圆形填充颜色。当参数为空时，圆形将没有填充效果 strokeWeight Number 圆形边线的宽度，以像素为单位 strokeOpacity Number 圆形边线透明度，取值范围0 - 1 fillOpacity Number 圆形填充的透明度，取值范围0 - 1 strokeStyle String 圆形边线的样式，solid或dashed enableMassClear Boolean 是否在调用map.clearOverlays清除此覆盖物，默认为true enableEditing Boolean 是否启用线编辑，默认为false enableClicking Boolean 是否响应点击事件，默认为true //高德地图 map Map 要显示该circle的地图对象 （自v1.2 新增） zIndex Number 层叠顺序 默认zIndex:10 center LngLat 圆心位置 bubble Boolean 是否将覆盖物的鼠标或touch等事件冒泡到地图上 （自v1.3 新增）默认值：false cursor String 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor radius Number 圆半径，单位:米 strokeColor String 线条颜色，使用16进制颜色代码赋值。默认值为#006600 strokeOpacity Float 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 strokeWeight Number 轮廓线宽度 fillColor String 圆形填充颜色,使用16进制颜色代码赋值。默认值为#006600 fillOpacity Float 圆形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 strokeStyle String 轮廓线样式，实线:solid，虚线:dashed extData Any 用户自定义属性，支持JavaScript API任意数据类型，如Circle的id等 strokeDasharray Array 勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在ie9+浏览器有效 取值： 实线：[0,0,0] 虚线：[10,10] ，[10,10] 表示10 个像素的实线和10 个像素的空白（如此反复）组成的虚线点画线：[10,2,10]， [10,2,10] 表示10 个像素的实线和2 个像素的空白 + 10 个像素的实线和10 个像素的空白 （如此反复）组成的虚线 * } * */
	this.Circle = function(center, radius, opts) {
		opts = opts || {};
		opts.center = center;
		opts.radius = radius;
		return new AMap.Circle(opts);
	}

	/** * 创建折线覆盖物对象 * @points {Array<Point>} * @opts { //百度参数 strokeColor String 折线颜色 strokeWeight Number 折线的宽度，以像素为单位 strokeOpacity Number 折线的透明度，取值范围0 - 1 strokeStyle String 折线的样式，solid或dashed enableMassClear Boolean 是否在调用map.clearOverlays清除此覆盖物，默认为true enableEditing Boolean 是否启用线编辑，默认为false enableClicking Boolean 是否响应点击事件，默认为true icons Array<IconSequence> 配置贴合折线的图标 //高德参数 map Map 要显示该polyline的地图对象 zIndex Number 折线覆盖物的叠加顺序。默认叠加顺序，先添加的线在底层，后添加的线在上层。通过该属性可调整叠加顺序，使级别较高的折线覆盖物在上层显示默认zIndex：50 bubble Boolean 是否将覆盖物的鼠标或touch等事件冒泡到地图上 （自v1.3 新增）默认值：false cursor String 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor geodesic Boolean 是否绘制成大地线，默认false相关示例 isOutline Boolean 线条是否带描边，默认false borderWeight Number 描边的宽度，默认为1 outlineColor String 线条描边颜色，此项仅在isOutline为true时有效，默认：#000000 path Array 折线的节点坐标数组 strokeColor String 线条颜色，使用16进制颜色代码赋值。默认值为#006600 strokeOpacity Number 线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 strokeWeight Number 线条宽度，单位：像素 strokeStyle String 线样式，实线:solid，虚线:dashed strokeDasharray Array 勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在ie9+浏览器有效 取值： 实线：[0,0,0] 虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实线和10个像素的空白 （如此反复）组成的虚线 lineJoin String 折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角 lineCap String 折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头 draggable Boolean 设置折线是否可拖拽移动，默认为false extData Any 用户自定义属性，支持JavaScript API任意数据类型，如Polyline的id等 showDir Boolean 是否延路径显示白色方向箭头,默认false。Canvas绘制时有效，建议折线宽度大于6时使用；在3D视图下不支持显示方向箭头（自V1.4.0版本参数效果变更） * } * */
	this.Polyline = function(points, opts) {
		opts = opts || {};
		if(_toString.call(points) === "[object Array]") {
			for(var i = 0; i < points.length; i++) {

				if(_toString.call(points[i]) === "[object Object]") {
					points[i] = [points[i].lng, points[i].lat];

				}
			}
		}
		if(_toString.call(points) === "[object Object]") {
			var ns = [points.lng, points.lat];
			points = ns;
		}
		if(ns) {
			opts.path = [points];
		} else {
			opts.path = points;
		}

		//opts.map=this.pulic;
		return new AMap.Polyline(opts);
	}

	/** * 创建一个文本标注实例。point参数指定了文本标注所在的地理位置 * @content {String} 标题内容 * @opts { //百度参数 * offset Size 文本标注的位置偏移值 position Point 文本标注的地理位置 enableMassClear Boolean 是否在调用map.clearOverlays清除此覆盖物，默认为true //高德参数 * } * */
	this.Label = function(content, opts) {
		opts = opts || {};
		//opts.map=this.pulic;
		opts.text = content;
		return new AMap.Text(opts);
	}

	/** *构造一个像素坐标对象。 * @x{Number} 设置X方向像素坐标 * @y{Number} 设置Y方向像素坐标 * */
	this.Pixel = function(x, y) {
		return new AMap.Pixel(x, y);
	}

	/** * 智能搜索 * @map {地图} * @obts { * input {string} 输入设置input * output {String／HTMLDivElement} 输出设置 callback Function 搜索结果的回调 * } * */
	this.LocalSearch = function(map, opts) {
		opts = opts || {};
		var that = opts;
		//建立智能填充
		if(!AMap.Autocomplete) {
			console.error('使用高德地图LocalSearch需要加载插件支持');
			return;
		}
		var auto = new AMap.Autocomplete({
			input: opts.input,
			output: opts.output
		});
		var placeSearch = new AMap.PlaceSearch({
			map: map
		}); //构造地点查询类
		AMap.event.addListener(auto, "select", function(e) {
			if(that && that.callback) {
				that.callback(e);
			}
		}); //注册监听，当选中某条记录时会触发

	}

	/** * 区域搜索 * Rectangle * * */
	this.SearchInRectangle = function(d) {

		var map = this.pulic, //地图实例
			southWest = null, //开始位置
			rectangle = null; //区域搜索
		/** * 解绑事件 * */
		!function removeListener() {
            map.off('mousedown', mousedownfn);
            map.off('mousemove', mousemovefn);
            map.off('mouseup', mouseupfn);
            document.removeEventListener('mouseup', mouseupfn,false);
        }();
		/** * 鼠标按下事件函数 * */
		function mousedownfn(e) {
			//设置鼠标不可以拖拽
			map.setStatus({
				dragEnable: false //true 可以拖拽
			});
			southWest = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat);
			//console.log('鼠标mousedown',e.lnglat.lng+'||'+e.lnglat.lat );
			rectangle = new AMap.Rectangle({
				map: map,
				bounds: new AMap.Bounds(southWest, southWest),
				strokeColor: d.strokeColor || "#1791fc",
				strokeOpacity: d.strokeOpacity || 0.8,
				strokeWeight: d.strokeWeight || 2,
				fillColor: d.fillColor || "#1791fc",
				fillOpacity: d.fillOpacity || 0.35,
				dragEnable: !1,
				strokeStyle: d.strokeStyle || "solid",
				strokeDasharray: d.strokeDasharray || [10, 5],
				zIndex: d.zIndex || 10,
				bubble: !0,
				cursor: 'pointer',
			});
			// console.log(southWest.rectZoomIn,'southWest'); 
		}
		//绑定鼠标移动事件
		map.on('mousemove', mousemovefn);
		/** * 鼠标移动事件函数 * */
		function mousemovefn(e) {
			//console.log(southWest);
			if(southWest) {
				//console.log('鼠标mousemove',e.lnglat.lng+'||'+e.lnglat.lat );
				var northEast = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat); //结束位置
				var Bounds = new AMap.Bounds(southWest, northEast); //矩形范围
				//设置矩形设置矩形的范围
				rectangle && rectangle.setBounds(Bounds);
			
				if(mouseupfn.isclear) {
					mouseupfn.isclear = 0;
				}
			}
			// console.log(map.getBounds());
		}
		//绑定鼠标弹起事件
		map.on('mouseup', mouseupfn);
		/** * 鼠标弹起事件函数 * */
		function mouseupfn(e) {
			if(mouseupfn.isclear) {
				return false;
			}
			mouseupfn.isclear = 1;
			//设置鼠标不可以拖拽
			map.setStatus({
				dragEnable: true //true 可以拖拽
			});

			//删除覆盖物
			setTimeout(function() {
				if(rectangle) {
					map.remove(rectangle);
					rectangle = null;
				}
			}, 200);

			southWest = null;
			//执行回调
			if(d.callback) d.callback(rectangle.getBounds());
			//console.log('鼠标mouseup',e.lnglat.lng+'||'+e.lnglat.lat );
		}
		//绑定鼠标按下事件
		map.on('mousedown', mousedownfn);
		//给document绑定mouseup事件
		document.addEventListener('mouseup', mouseupfn, false);

	}
	/** * 坐标转换 * 百度to高德 * @lnglat{LngLat|Array.<LngLat>} 经纬度 * @type {String} gps:GPS原始坐标；baidu：百度经纬度；mapbar：图吧经纬度； * */
	this.convertFrom = function(lnglat, callback) {

		AMap.convertFrom(lnglat, "baidu", callback)

	}

}]);

上述代码基本实现了日前我们的需求，代码性能还需优化，比如实例点位，实例圆形，都可以进行缓存。例如：

//缓存
var d=function(){
	var cache={
		
	};//缓存列表
	function sum(){
		var arg=[].slice.call(arguments);
		args=arg.join(),
		l=arguments.length;
		if(cache[args]){
			return cache[args];
		}
		var n=0;
		while(--l){
			n+=arguments[l];
		}
		console.log('-----------只计算第一次-------')
		cache[args]=n;
		return n;
	}
	return {
		sum:sum,
	}
}();

利用闭包特性进行缓存数据，以更快速反馈给用户。

上面代码如何使用： 第一步确定使用哪类地图，这个值可以是后台模板输出。通过这个值加载相应的地图。 第二步引入刚刚实现的库 第三步使用咱们自己实现的库 HTML

<div id="Map" style="height:500px;">
			
</div>

js

//配置默认项
Gis_Map.config = {
	maptype: 1, //0:代表百度地图，1：高德地图，2：腾讯地图
}
var maps = null;
//执行主函数。
Gis_Map.init();
maps = Gis_Map.Map('Map', { enableMapClick: false, minZoom: 5, });
//console.log(Gis_Map.pulic.centerAndZoom,'Gis_Map.pulic.centerAndZoom');
var point = Gis_Map.Point(116.404, 39.915);
//使用返回实例 也可以实现    
maps.centerAndZoom(point, 5);
//是否启用缩放设置
maps.enableScrollWheelZoom(true);
//console.log(maps);
/**
 * 给地图绑定点击事件
 * */
maps.addEventListener('click', function(e) {

});
//创建icon
var icons = Gis_Map.Icon('js/map_js/icon.png', Gis_Map.Size(48, 53));
//创建maker
var maker = Gis_Map.Marker(Gis_Map.Point(112.361031, 36.391437), { title: 'maker', icon: icons });

Gis_Map.convertFrom(Gis_Map.Point(114.469026, 35.45613), function(a, b) {
	console.log(a, b);
	if(b.info === 'ok') {

		var maker_1 = Gis_Map.Marker(Gis_Map.Point(b.locations[0].lng, b.locations[0].lat), { title: 'maker_1', icon: icons });
		maps.addOverlay(maker_1);
	}

});

maker.addEventListener('click', function(e) {
	var p = e.target;
	var point = Gis_Map.Point(p.getPosition().lng, p.getPosition().lat);

	var winfor = Gis_Map.InfoWindow('<div class="InfoWindow">InfoWindow 当前经度：' + p.getPosition().lng + ' 当前纬度：' + p.getPosition().lat + ' <div>', {
		width: 400,
		height: 200
	});

	Gis_Map.openInfoWindow(winfor, point);
});
//添加标注
maps.addOverlay(maker);

var yuan = Gis_Map.Circle(Gis_Map.Point(116.404, 39.915), 200000, {
	fillColor: "blue", //填充颜色
	strokeWeight: 1, //描边粗细
	fillOpacity: 0.3, //填充透明度
	strokeOpacity: 0.3 //描边透明度
});

maps.addOverlay(yuan);

var p1 = [116.148568, 37.904113];
var p2 = [116.167794, 37.934447];
var p3 = [116.230965, 37.960437];
var p4 = [116.277657, 37.990748];
var p5 = [116.373788, 38.014555];

var xian = Gis_Map.Polyline([p1, p2, p3, p4, p5], {
	strokeColor: "#000000", //设置颜色
	strokeWeight: 10, //宽度  
	strokeOpacity: 1, //透明度
	strokeStyle: "solid"
});
// console.log(xian);
maps.addOverlay(xian);

var label = Gis_Map.Label('测试数据', {
	offset: Gis_Map.Pixel(2, 5),
	position: [112.361031, 36.391437],

});

maps.addOverlay(label);

var text = new AMap.Text({
	text: '纯文本标记',
	textAlign: 'center', // 'left' 'right', 'center',
	verticalAlign: 'middle', //middle 、bottom
	draggable: true,
	cursor: 'pointer',
	angle: 10,
	style: {
		'background-color': 'yellow',
		'border': 'solid 1px #0088ff',
		'padding': '10px 20px'
	},
	position: [116.396923, 39.918203]
});

//地址搜索
Gis_Map.LocalSearch(maps, {
	input: 'search',
	output: 'list', callback: function(e) { console.log(e); } }); var point1 = Gis_Map.Point(116.368904, 39.923423); var point2 = Gis_Map.Point(116.387271, 39.922501); console.log(maps.getDistance(point1, point2), '=====两点间的距离'); /** * 在地图上拉框 返回拉的框坐标位置 * 参数 * map Map 要显示该rectangle的地图对象 zIndex Number 层叠顺序 默认zIndex:10 bounds Bounds 矩形的范围 bubble Boolean 是否将覆盖物的鼠标或touch等事件冒泡到地图上 默认值：false cursor String 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor strokeColor String 线条颜色，使用16进制颜色代码赋值。默认值为#006600 strokeOpacity Float 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 strokeWeight Number 轮廓线宽度 fillColor String 矩形填充颜色,使用16进制颜色代码赋值。默认值为#006600 fillOpacity Float 矩形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 strokeStyle String 轮廓线样式，实线:solid，虚线:dashed extData Any 用户自定义属性，支持JavaScript API任意数据类型，如Rectangle的id等 strokeDasharray Array 勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在ie9+浏览器有效 取值： 实线：[0,0,0] 虚线：[10,10] ，[10,10] 表示10 个像素的实线和10 个像素的空白（如此反复）组成的虚线 点画线：[10,2,10]， [10,2,10] 表示10 个像素的实线和2 个像素的空白 + 10 个像素的实线和10 个像素的空白 （如此反复）组成的虚线 * * */ Gis_Map.SearchInRectangle({ callback: function(e) { //矩形的 Bounds【范围】 console.log('SearchInRectangle=====callback', e); } }); 

总结

有时候改轮子也好造轮子也罢！只有你能驾驭他们那你就是成功的。通过上边此次代码编写，让自己在架构上走了一步。只有自己不断学习，不断尝试，才能实现自己的职业规划。