深入学习jquery源码之高德地图组件的使用

深入学习jquery源码之高德地图组件的使用

高德地图组件是一类高度模块化的LBS服务组件，开发者通过调用相应标签便可轻松实现诸如在地图上标注点、查找附近poi、公交/驾车线路规划等功能。该类组件仅针对手机浏览器类的应用，与API相比，标签方式调用更为简单，模块化程度更高，可以极大地降低开发成本。

使用高德地图，具体请参考管网 

https://lbs.amap.com/api/javascript-api/guide/abc/plugins#plugin

在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

添加div标签作为地图容器，同时为该div指定id属性；以下面的例子定义id为leakMap

异步加载 JS API

同步加载

    var map = new AMap.Map('leakMap', {
       center:[117.000923,36.675807],
       zoom:11
    });

异步加载

    window.init = function(){
        var map = new AMap.Map('leakMap', {
           center:[117.000923,36.675807],
           zoom:11
        });
    }

地图插件的使用

JS API 提供了众多的插件功能，这些功能不会主动随着 JSAPI 主体资源下发，需要引入之后才能使用这些插件的功能。这些功能包括：

• 服务类，如：POI搜索 PlaceSearch、输入提示 AutoComplete、路线规划 Driving/Walker/Transfer/Riding/Truck、地理编码 Geocoder、公交线路 LineSearch、公交站点 StationSearch、天气查询 Weather等；
• 地图控件，如：缩放工具条 ToolBar、比例尺 Scale、定位按钮 Geolocation等；
• 矢量图形编辑工具，如折线/多边形编辑器 PolyEditor、圆形编辑器 CircleEditor等；
• 工具类，如鼠标绘制工具 MouseTool、测距工具 RangingTool等。

异步加载插件

异步加载指的是在 JS API 加载完成之后，在需要使用到某个插件的时候，通过AMap.plugin方法按需引入插件，在plugin回调之后使用插件功能。

    var map = new AMap.Map('container',{
        zoom:12,
        center:[116.39,39.9]
    });
    AMap.plugin('AMap.ToolBar',function(){//异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
    });

 

高德地图API的封装

/** 高德autonavi 地图API Define：begin */
var AutoNaviMap = function(mapOption){
	
	this.map = null;													//高德autonavi地图对象
	
	this.mapWrap = mapOption.mapWrap;									//地图容器
	
	this.mapRange = mapOption.mapRange;									//地图范围
	
	this.centerPoint = mapOption.centerPoint;							//中心点
	
	this.GeoServerLayers = mapOption.GeoServerLayers;					//GeoServer 图层参数
	
	this.GeoServerlayerEntities = null;									//GeoServer 图层实例对象
	
	this.zoom = mapOption.zoom==undefined ? 15 : mapOption.zoom;
	
	this.contextMenuPositon;											//右键菜单位置
	
	this.mapLayer;//管线图层
	
	this.heatmap;
	
	this.toolBar = null; // 地图oolBar插件
	
	this.markers = [];
	
	this.infoWindow = {};													//global infoWindow
	
	this.polygon;
	
	this.init = function(){
		var self = this;
		if(!self.map){ 
			var option = {resizeEnable : true,								//监控地图容器尺寸变化，默认为false
							zoom : self.zoom, 							    //显示级别
							mapStyle: "amap://styles/darkblue",				//地图样式主题
							features:['bg', 'point', 'building'],			//地图展示元素
							logo : false};
			if(self.centerPoint && !$.isEmptyObject(self.centerPoint)){			//设置中心点
				var transCoordinate = {
						'lng':self.centerPoint.x,
						'lat':self.centerPoint.y
				};
				
				if(!mapOption.noTransAmap) {
					self.centerPoint.lng = self.centerPoint.x;
					self.centerPoint.lat = self.centerPoint.y;
					transCoordinate = self.get_GCJLngLat(self.centerPoint);
        		}
				option['center'] = new AMap.LngLat(transCoordinate.lng, transCoordinate.lat);
			}
			
			self.map = new AMap.Map(self.mapWrap, option);
			
			//地图单击事件
			if(mapOption.click && $.isFunction(mapOption.click)) {
				self.map.on('click',function(e){
					var mapPoint = getMapPoint(e);			//经纬度
					var screenPoint = getScreenPoint(e);
						mapOption.click(mapPoint, screenPoint);
				});  //点事件的获取
			}
			
			
			//地图缩放结束事件
			if(mapOption.zoomend && $.isFunction(mapOption.zoomend)) {
				self.map.on('zoomend',function(e){
						mapOption.zoomend();
				});  //点事件的获取
			}
			
			self.map.plugin(["AMap.ToolBar"], function() {
				toolBarOption = {
					offset:new AMap.Pixel(10,50)
				}
				toolBar = new AMap.ToolBar(toolBarOption);  
				self.map.addControl(toolBar);
			});
			//添加比例尺控件
			self.map.plugin(["AMap.Scale"],function(){
			    self.map.addControl(new AMap.Scale());  
			});
			//地图类型切换
			self.map.plugin(["AMap.MapType"],function(){	
			    var type= new AMap.MapType({
			    	defaultType:0 //使用2D地图
			    });
			    self.map.addControl(type);
			});
			
			$(".amap-maptype-wrap").bind('click',function(){
				if(self.mapLayer && self.map){
					self.mapLayer.setMap(self.map);
				}
			}); // 绑定地图切换插件单击事件
			
			
		}
		//在高德地图上 叠加 标准wms图层
		setTimeout(function(){
			if(self.GeoServerLayers && self.GeoServerLayers.length>0){
				self.GeoServerlayerEntities = {};
				for(var i=0,len=self.GeoServerLayers.length; i 0) {
			$.each(mPolygon.points, function(coordinateIndex, coordinateEntry) {
				if(coordinateEntry.lng && coordinateEntry.lat && Number(coordinateEntry.lng)>0 && Number(coordinateEntry.lat)>0){
	        		var transCoordinate = {
	        			'lng':coordinateEntry.lng,
	        			'lat':coordinateEntry.lat	
	        		}
	        		//若不是从天地图转换为高德地图，则不用转换坐标系
	        		if(!mPolygon.noTransAmap) {
	        			var transCoordinate = _self.get_GCJLngLat(coordinateEntry);
	        		}
		            coordinatesList.push(new AMap.LngLat(transCoordinate.lng, transCoordinate.lat));
	        	}
			});
			if(coordinatesList.length>0) {
				polygon = new AMap.Polygon({
					map:_self.map,
			        path: coordinatesList,//设置多边形边界路径
			        strokeColor: mPolygon.color?mPolygon.color:"#FF33FF", //线颜色
			        strokeOpacity: mPolygon.opacity?mPolygon.opacity:0.2, //线透明度
			        strokeWeight: mPolygon.width?mPolygon.width:3,    //线宽
			        fillColor: mPolygon.fillColor?mPolygon.fillColor:"#1791fc", //填充色
			        fillOpacity: mPolygon.fillOpacity?mPolygon.fillOpacity:0.35,//填充透明度
			        zIndex:mPolygon.zIndex
			    });
	        }
		}
		return polygon;
	};
	
	this.drawLine = function(mLine){
		var _self = this;
		var polyLine;
		var coordinatesList = [];
	    if (mLine.pionts.length > 0) {
	        $.each(mLine.pionts, function(coordinateIndex, coordinateEntry) {
	        	if(coordinateEntry.lng && coordinateEntry.lat && Number(coordinateEntry.lng)>0 && Number(coordinateEntry.lat)>0){
	        		var transCoordinate = {
	        			'lng':coordinateEntry.lng,
	        			'lat':coordinateEntry.lat	
	        		}
	        		//若不是从天地图转换为高德地图，则不用转换坐标系
	        		if(!mLine.noTransAmap) {
	        			var transCoordinate = _self.get_GCJLngLat(coordinateEntry);
	        		}
		            coordinatesList.push(new AMap.LngLat(transCoordinate.lng, transCoordinate.lat));
	        	}
	        });
	        if(coordinatesList.length>0) {
	        	polyLine = new AMap.Polyline({
	        		id : mLine.id,
	        		map:_self.map,
	        		path: coordinatesList,          //设置线覆盖物路径
	        		strokeColor: mLine.color, //线颜色
	        		strokeOpacity: mLine.opacity,       //线透明度
	        		strokeWeight: mLine.width,        //线宽
	        		strokeStyle: mLine.style,   //线样式
	        		strokeDasharray: mLine.dasharray //补充线样式
	        	});
	        }
	        
	        if(mLine.infowindow && !$.isEmptyObject(mLine.infowindow)) {
	        	if(!$('body').find('#infowindow').length>0) {
	        		var html = '
';
	        		$('body').append(html);
	        	}
				polyLine.on('mouseover',function(e) {
					$('body').find('#infowindow p').html(mLine.infowindow.content);
					$('#infowindow').show();
					$('#infowindow').css("left",e.pixel.x-$('#infowindow').width()/2);
					$('#infowindow').css("top",e.pixel.y-$('#infowindow').height());
				});
				polyLine.on('mouseout',function(e) {
					$('#infowindow').hide();
				});
			}
	        
	        if(mLine.onClick){
	        	polyLine.on('click',function(e) {
	        		mLine.onClick(e);
				});
	        }
	    }
	    return polyLine;
	};

	/**
	 * 删除点
	 * point 为map地图对象， drawPoint时返回
	 */
	this.removePoint = function(point){
		this.map.remove(point);
	};
	
	this.removeLine = function(mLine){
		var _self = this;
		 _self.map.remove(mLine);
	};
	
	this.removePolygon = function(polygon){
		 var _self = this;
		 _self.map.remove(polygon);
	};
	this.drawPoint = function(mPoint){
		var _self = this;
		var transCoordinate = {
			'lng':mPoint.lng,
			'lat':mPoint.lat
		};
		
		var marker;
		if(mPoint.lng && mPoint.lat && Number(mPoint.lng)>0 && Number(mPoint.lat)>0){
			//若不是从天地图转换为高德地图，则不用转换坐标系
			if(!mPoint.noTransAmap) {
				transCoordinate = _self.get_GCJLngLat(mPoint);
			}
			var icon;
			if(mPoint.type.imgUrl == "") {
				icon = new AMap.Icon({
					imageSize:new AMap.Size(mPoint.type.width,mPoint.type.height),
					size: new AMap.Size(mPoint.type.width,mPoint.type.height),  //图标大小
				});
			} else {
				icon = new AMap.Icon({
					imageSize:new AMap.Size(mPoint.type.width,mPoint.type.height),
					size: new AMap.Size(mPoint.type.width,mPoint.type.height),  //图标大小
					image:mPoint.type.imgUrl
				});
			}
			
			var pointOpitons = {
				map:_self.map,
				icon:icon,
				position:[transCoordinate.lng,transCoordinate.lat],
				offset:new AMap.Pixel(mPoint.type.xoffset, mPoint.type.yoffset),  //偏移量
				title:mPoint.type.title,         //点的文字提示
				extData:mPoint
			};
			marker = new AMap.Marker(pointOpitons);
			mPoint.marker = marker;
			if(mPoint.type.onClick && $.isFunction(mPoint.type.onClick)) {
				marker.on('click',function(e){
					mPoint.type.onClick(e.target.getExtData(),null);
				});  //点事件的获取
			}
			if(null != mPoint.labelContent && '' != mPoint.labelContent && 'undefined' != mPoint.labelContent){
		        marker.setLabel({
		            offset: new AMap.Pixel(20, -10), //显示位置
		            content: mPoint.labelContent //显示内容
		        });
		      }
			_self.markers.push(mPoint);
		}
		if(mPoint.type.showInfo && mPoint.type.infowindow && !$.isEmptyObject(mPoint.type.infowindow)) {
			if(marker != undefined) {
				var position = {
					'lng':mPoint.lng,
					'lat':mPoint.lat
				};
				if(!mapOption.noTransAmap) {
					position = _self.get_GCJLngLat({'lng':mPoint.lng,'lat':mPoint.lat});
				}
				var infowindow = mPoint.type.infowindow;
				var infoMouseOverWin = new AMap.InfoWindow({
					isCustom:true,
					content: infowindow.content,
				    offset: new AMap.Pixel(infowindow.xoffset,infowindow.yoffset)
				});
				infoMouseOverWin.open(_self.map, new AMap.LngLat(position.lng,position.lat));
				_self.infoWindow.uniqueCode = mPoint.busiKey;
			}	
		}
	};
	
	/**
	 * 展示自定义弹出框
	 */
	this.showInfoWindow = function(mPoint){
		var _self = this;
		if(mPoint.type.infowindow && !$.isEmptyObject(mPoint.type.infowindow)) {
			var position = {
				'lng':mPoint.lng,
				'lat':mPoint.lat
			};
			if(!mapOption.noTransAmap) {
				position = _self.get_GCJLngLat({'lng':mPoint.lng,'lat':mPoint.lat});
			}
			var infowindow = mPoint.type.infowindow;
			var infoMouseOverWin = new AMap.InfoWindow({
				isCustom:true,
				content: infowindow.content,
			    offset: new AMap.Pixel(infowindow.xoffset,infowindow.yoffset)
			});
			infoMouseOverWin.open(_self.map, new AMap.LngLat(position.lng,position.lat));
			_self.infoWindow.uniqueCode = mPoint.busiKey;
		}
	}
	
	this.getInfoWindowUnique = function(){
		var _self = this;
		return _self.infoWindow.uniqueCode;
	}
	
	this.clearGraphics = function(type) {
		var _self = this;
		for(var i =0; i 0) {
			$.each(heatMap.data, function(coordinateIndex, coordinateEntry) {
				if(coordinateEntry.lng && coordinateEntry.lat && Number(coordinateEntry.lng)>0 && Number(coordinateEntry.lat)>0){
	        		var transCoordinate = {
	        			'lng':coordinateEntry.lng,
	        			'lat':coordinateEntry.lat	
	        		}
	        		//若不是从天地图转换为高德地图，则不用转换坐标系
	        		if(!heatMap.noTransAmap) {
	        			transCoordinate = _self.get_GCJLngLat(coordinateEntry);
	        		}
		            coordinatesList.push(new AMap.LngLat(transCoordinate.lng, transCoordinate.lat));
	        	}
			});
		}
		if(coordinatesList.length>0) {
			_self.map.plugin(["AMap.Heatmap"], function() {
		        //初始化heatmap对象
		        _self.heatmap = new AMap.Heatmap(_self.map, {
		            radius: 80, //给定半径
		            opacity: [0, 0.8]
		        });
		        //设置数据集
		        _self.heatmap.setDataSet({
		            data: coordinatesList,
		            max: 2
		        });
		    });
        }
	}
	
	/**
	 *画圆  获取中心点及半径 
	 *20180122
	 */
	this.draw =function (){
		var _self = this;
		var mouseTool = new AMap.MouseTool(_self.map);
		//自定义图形样式
		 mouseTool.polyline({
	            strokeColor:"#f50", // 线条颜色，十六进制
	            strokeOpacity:0.5, // 线条透明度
	            strokeWeight:10, // 线条宽度
	            strokeStyle:"dashed" // 线条样式 solid || dashed
	        });
		   //在地图中添加MouseTool插件
		mouseTool.circle(); //用鼠标工具画圆
		AMap.event.addListener( mouseTool,'draw',function(e){ //添加事件
			  console.log(e.obj.getRadius());//获取半径
			  console.log(e.obj.getCenter());//获取中心点
			  showChoseDevice(e.obj.getRadius(),e.obj.getCenter());
			  mouseTool.close(true);//关闭当前鼠标操作
		});
		
	} ;
	
	
	
	//画圆
	this.drawCircle = function(circle){
		var _self = this;
		var center = new AMap.LngLat(circle.center.lng,circle.center.lat);
		var circleOptions = {
			center:center,
			zIndex:1000,
			radius:circle.radius,         //半径1公里
			strokeColor: "#F33", //线颜色
	        strokeOpacity: 1, //线透明度
	        strokeWeight: 3, //线粗细度
	        fillColor: "#ee2200", //填充颜色
	        fillOpacity: 0.35//填充透明度
		};
		var _circle = new AMap.Circle(circleOptions);
		_circle.setMap(_self.map);
		circle.marker = _circle;
	}
	
	this.circleContains = function(circle,point) {
		var _self = this;
		var transCoordinate = {
    			'lng':point.lng,
    			'lat':point.lat	
    		}
		//若不是从天地图转换为高德地图，则不用转换坐标系
		if(!point.noTransAmap) {
			transCoordinate = _self.get_GCJLngLat(point);
		}
		var _point = new AMap.LngLat(transCoordinate.lng,transCoordinate.lat);
		var isContains = circle.marker.contains(_point);
		return isContains;
	}
	
	//绑定地图缩放事件
	this.bindZoomChange = function(callBack) {
		var _self = this;
		_self.map.on('zoomchange', function(e) {
			callBack(_self.map.getZoom());
		});
	}
	
	//绑定地图单击事件
	this.bindClick = function(callBack) {
		var _self = this;
		_self.map.on('click', function(e) {
			callBack(e.lnglat.getLng(),e.lnglat.getLat(),_self.map.getZoom());
		});
	}
	
	/**
	 * 获取缩放等级
	 */
	this.getZoom = function(){
		var _self = this;
		return _self.map.getZoom();
	}
	
	//显示或隐藏热力图
	this.showHeatMap = function(isShow) {
		var _self = this;
		if(_self.heatmap) {
			if(isShow) {
				_self.heatmap.show();
			} else {
				_self.heatmap.hide();
			}
		}
		
	}
	
	//添加右键菜单获取坐标
	this.addGetLnglatMenu = function() {
		var _self = this;
		var menu = new AMap.ContextMenu();
		//添加菜单项 
		menu.addItem("发送任务",function() {
			debugger;
			mapDbClick(contextMenuPositon.getLat(),contextMenuPositon.getLng());
			//alert(contextMenuPositon.getLng() + "," + contextMenuPositon.getLat());
		},0);
	
		//为地图注册rightclick事件获取鼠标点击出的经纬度坐标
	    var clickEventListener = _self.map.on('rightclick', function(e) {
	        menu.open(_self.map,e.lnglat);
	        contextMenuPositon = e.lnglat;
	    });
	};
	
	this.setCenter = function(lnt,lat) {
		var transCoordinate = {
			'lng':lnt,
			'lat':lat
		};
		var _self = this;
		if(!mapOption.noTransAmap) {
			_self.centerPoint.lng = lnt;
			_self.centerPoint.lat = lat;
			transCoordinate = _self.get_GCJLngLat(_self.centerPoint);
		}
		_self.map.setCenter(new AMap.LngLat(transCoordinate.lng, transCoordinate.lat));
	};
	
	this.closeInfoWindow = function(infoWindow) {
		var _self = this;
		_self.map.clearInfoWindow();
	};
		
	this.fromLngLatToContainerPixel = function(mPoint) {
		var _self = this;
		var retObj = _self.map.lnglatToPixel(new AMap.LngLat(mPoint.lng,mPoint.lat));
		return new SreenPoint(retObj);
	};
	
	this.fromContainerPixelToLngLat = function(mPoint) {
		var _self = this;
		var retObj = _self.map.pixelToLngLat(new AMap.Pixel(mPoint.x,mPoint.y));
		return new MapPoint(retObj);
	};
	this.setFitView = function() {
		var _self = this;
		_self.map.setFitView();
	};
	this.zoomOut = function() {
		var _self = this;
		_self.map.zoomOut();
	}
	this.get_GCJLngLat = function(mPoint) {
		
		var retObj = {};
		var CT = new CoordinateTransform(mPoint.lat, mPoint.lng, CoordinateSys.WGS84);//CoordinateSys.WGS84 是转换前的坐标系
		var retValue = new Object();
        if (CT.WGS84ToGCJ02()== false)//WGS84ToBD09()方法 WGS84转BD坐标，如果是转成火星坐标改调用WGS84ToGCJ02()
        console.info(CT.get_ErrMsg());
        retObj.lat = CT.get_GCJLat() == 0 ? mPoint.lat : CT.get_GCJLat();//获取转换后的高德坐标纬度
        retObj.lng = CT.get_GCJLng() == 0 ? mPoint.lng : CT.get_GCJLng();//获取转换后的高德坐标精度
		return retObj;
	};
	
};

function openWindowTask(tltle,url){
	var options = {
		modal : true,
		title : tltle,
		collapsible : false,
		minimizable : false,
		maximizable : false,
		closable : true,
		closed : false
	};
	var uid = "self_card_";
	options["id"] = uid;
	winFormDesigner = UIFactory.getUI(uid);
	if(!winFormDesigner){
		winFormDesigner = UIFactory.create(xpad.ui.Window, options);
	}
	var root = jQuery("body");
	var offset = root.offset();
	var winleft = 0;
	var wintop = 0;
	var newSize = {};
	newSize["left"] = (jQuery("body").width()-450)/2;
	newSize["top"] = 20;
	newSize["width"] = 450;//jQuery("body").width();
	newSize["height"] = 500;//jQuery("body").height();
	winFormDesigner.window("resize", newSize);
	setTimeout(function(){
		winFormDesigner.loadURL(url);
	}, 0);
}


AutoNaviMap.CLASS_NAME = "AutoNaviMap";
/**高德autonavi 地图API Define：end */

业务API的封装

/** ServiceMap Define：begin */
var ServiceMap = function(mapOption){
	
	this.map = new mapOption.mapClass(mapOption);		//地图对象
	this.map.init();										//初始化地图组件
	
	/**
	 * 画线
	 */
	this.drawLine = function(line){
		return this.map.drawLine(line);
	};
	
	/**
	 * 画点
	 */
	this.drawPoint = function(point){
		return this.map.drawPoint(point);
	};
	/**
	 * 地图经纬度坐标转换为平面地图像素坐标
	 */
	this.fromLngLatToContainerPixel = function(point) {
		return this.map.fromLngLatToContainerPixel(point);
	};
	/**
	 * 平面地图像素坐标转换为地图经纬度坐标
	 */
	this.fromContainerPixelToLngLat = function(point) {
		return this.map.fromContainerPixelToLngLat(point);
	};
	
	/**
	 * 控制geoServer图层	显示与隐藏
	 * pipeCode : 管线压力级制编码
	 * checkType : 选中还是取消选中
	 */
	this.geoServerLayerVisibleOrHide = function(pipeCode, checkType){
		return this.map.geoServerLayerVisibleOrHide(pipeCode, checkType);
	}
	
	/**
	 * checkType : 选中还是取消选中
	 */
	this.geoAllLayerVisibleOrHide = function(checkType){
		return this.map.geoAllLayerVisibleOrHide(checkType);
	}
	
	/**
	 * 根据覆盖物设置合适的视野
	 */
	this.setFitView = function() {
		this.map.setFitView();
	};
	
	/**
	 * 删除点
	 * point 为map地图对象， drawPoint时返回
	 */
	this.removePoint = function(point){
		this.map.removePoint(point);
	}
	
	this.clearGraphics = function(mpoint){
		return this.map.clearGraphics(mpoint);
	}
	
	/**
	 * 删除线
	 * line 为map地图对象， drawLine时返回
	 */
	this.removeLine = function(line){
		this.map.removeLine(line);
	}
	
	this.removePolygon = function(polygon){
		this.map.removePolygon(polygon);
	}
	
	/**
	 * 设置中心点
	 * lng 纬度
	 * lat 经度
	 */
	this.centerAt = function(lng, lat){
		this.map.centerAt(lng, lat);
	}
	
	this.setCenter = function(lng, lat){
		this.map.setCenter(lng, lat);
	}
	/**
	 * 设置级别
	 * zoom  Number
	 */
	this.setZoom = function(zoom){
		this.map.setZoom(zoom);
	}
	
	/**
	 * 地图可视区域
	 * 返回对象： MapBounds
	 */
	this.getBounds = function(){
		return this.map.getBounds();
	}
	
	/**
	 * 圈选要素
	 * layer ： 子图层索引
	 * strWhere ： 查询条件
	 * callBack ： 回调函数， 返回feature列表
	 */
	this.selectFeature = function(layer, strWhere, callBack){
		this.map.selectFeature(layer, strWhere,callBack);
	}
	
	/**
	 * 获取圈选覆盖物
	 */
	this.selectOverlay = function(callBack){
		this.map.selectOverlay(callBack);
	}
	
	/**
	 * 获取缩放等级
	 */
	this.getZoom = function(){
		return this.map.getZoom();
	}
	
	/**
	 * 关闭弹出信息框
	 * @returns
	 */
	this.closeInfoWindow = function(){
		this.map.closeInfoWindow();
	}
	
	/**
	 * 展示自定义弹出框弹出框
	 */
	this.showInfoWindow = function(mPoint){
		this.map.showInfoWindow(mPoint);
	}
	
	/**
	 * 获取弹出框唯一id，通常用业务唯一标识表示
	 */
	this.getInfoWindowUnique = function(){
		return this.map.getInfoWindowUnique();
	}
	
	this.drawPolygon = function(mPolygon){
		return this.map.drawPolygon(mPolygon);
	}
	
	
};
ServiceMap.CLASS_NAME = "ServiceMap";
/** ServiceMap Define：end */

使用地图组件进行画点画线等操作

html

js

$(function(){
	var mapOption = {
			'mapWrap' : 'leakMap',									//地图容器
			/*'mapRange' : {'xmin':70.45193,'ymin':15.14801,
						  'xmax':137.424587,'ymax':53.976474},		//坐标范围
*/			'centerPoint' : {'x':116.383105, 'y':39.974672},		//中心点
			'mapClass' : AutoNaviMap,								//地图组件
			'isAddNavigationControl':true,                  		//工具条
			'isAddControl':false,					        		//类别切换
			'zoom': 10,
			'GeoServerUrl': 'http://6666/geoserver',
			 'GeoServerLayers': getGeoServerParameters(),
            'zoomend': function(mapPoint, screenPoint){
            	controlLayers(serviceMap.getZoom());
            },
            'click' : function(mapPoint, screenPoint){				//地图点击事件
				console.log('地图坐标：(' + mapPoint.lng + ', ' + mapPoint.lat +');屏幕坐标：(' + screenPoint.x + ',' + screenPoint.y + ')');
			},
			openSatelliteLayer:false
		};
	serviceMap = new ServiceMap(mapOption);
})


//所有已绘制的线和点
var lines = [],drawPoints = [],drawNewPoints =[];
var Leak = {
	
		/**
		 * 画线
		 */
		drawLine:function(points){
			if(!$.isEmptyArray(lines)){
				serviceMap.removeLine(lines[0]);
			}
			//画线
			var line = {
					'color' : '#FF0033',
					'width' : 3,
					pionts:points,
				};
			
			lineObj = serviceMap.drawLine(line);
			lines.push(lineObj);
		},
		removeLine:function(){
			
			serviceMap.removeLine(lines);
		},
		
		/**
		 * 画点
		 */
		drawPoint:function(point){
			drawPoints.push(point);
			serviceMap.drawPoint(point);
		},
		drawNewPoint:function(point){
			drawNewPoints.push(point);
			serviceMap.drawPoint(point);
		},
		
		/**
		 * 删除点
		 */
		removePoint:function(){
			if(!$.isEmptyArray(drawPoints)){
				for(var i=0;i