前言

日前在公司负责的主要业务是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);
	}
});

总结

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