如何實現一個地圖庫封裝，能夠快速切換地圖

前言

日前在公司負責的主要業務是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);
	}
});
複製代碼

總結

有時候改輪子也好造輪子也罷！只有你能駕馭他們那你就是成功的。經過上邊這次代碼編寫，讓本身在架構上走了一步。只有本身不斷學習，不斷嘗試，才能實現本身的職業規劃。