前言
日前在公司负责的主要业务是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);
}
});
总结
有时候改轮子也好造轮子也罢！只有你能驾驭他们那你就是成功的。通过上边此次代码编写，让自己在架构上走了一步。只有自己不断学习，不断尝试，才能实现自己的职业规划。
