前言
日前在公司負責的主要業務是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,
}
}();
複製程式碼利用閉包特性進行快取資料，以更快速反饋給使用者。
<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);
}
});
複製程式碼總結
有時候改輪子也好造輪子也罷！只有你能駕馭他們那你就是成功的。通過上邊此次程式碼編寫，讓自己在架構上走了一步。只有自己不斷學習，不斷嘗試，才能實現自己的職業規劃。