高德地图API的开发与代码编写

最新推荐文章于 2024-06-01 18:29:03 发布

wespten

最新推荐文章于 2024-06-01 18:29:03 发布

阅读量3.4k

点赞数 1

分类专栏： JavaEE Spring 微信小程序项目架构文章标签：高德地图API的开发与代码编写

本文链接：https://blog.csdn.net/qq_35029061/article/details/84314728

版权

JavaEE Spring 微信小程序项目架构专栏收录该内容

159 篇文章 10 订阅

订阅专栏

高德地图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(){
		debugger;
		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)) {
				debugger;
				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<len; i++){
					var geoItem = self.GeoServerLayers[i];
					 // 创建 WMS 标准图层
					var version = geoItem.GeoServerVersion || '1.1.0';
					var wms  = new AMap.TileLayer.WMS({
				        url: geoItem.GeoServerLayerUrl,
				        blend: true,
				        tileSize: 256,
				        visible: false,
				        params: {'LAYERS': geoItem.GeoServerLayerName,VERSION:version}
				    });
					self.GeoServerlayerEntities[geoItem.GeoServerLayerCode] = wms;
					//wms.show();
					wms.setMap(self.map);
				}
			}
		}, 1000);
		
		if(mapOption.openSatelliteLayer){
			var satelliteLayer = new AMap.TileLayer.Satellite();
			var roadNetLayer =  new AMap.TileLayer.RoadNet();
			var layers = [
				satelliteLayer
			]
			// 添加到地图上
			self.map.add(layers);
		}
	};
	
	
	/**
	 * checkType : 选中还是取消选中
	 */
	this.geoAllLayerVisibleOrHide = function(checkType){
		var self = this;
		var _GeoServerlayerEntities = self.GeoServerlayerEntities;
		for(var o in _GeoServerlayerEntities){
			if(checkType){
				_GeoServerlayerEntities[o].show();
			}else{
				_GeoServerlayerEntities[o].hide();
			}
		}
	}
	
	/**
	 * 控制geoServer图层	显示与隐藏
	 * pipeCode : 管线压力级制编码
	 * checkType : 选中还是取消选中
	 */
	this.geoServerLayerVisibleOrHide = function(pipeCode, checkType){
		var self = this;
		var _GeoServerlayerEntities = self.GeoServerlayerEntities;
		var glayer = _GeoServerlayerEntities[pipeCode];
		if(checkType){
			glayer.show();
		}else{
			glayer.hide();
		}
	};
	
	this.drawPolygon = function(mPolygon){
		var _self = this;
		var coordinatesList = [];
		if (mPolygon.points.length > 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 = '<div id="infowindow" style="position:absolute;display:none" class="box_wraper"><div class="box_con"><p></p></div><div class="box_img"><img src="/HRSmartGas/platform/images/box_img.png"/></div></div>';
	        		$('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){
		debugger;
		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){
					debugger;
					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)) {
			debugger;
			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){
		debugger;
		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<_self.markers.length; i++){
			if(type){
				if((_self.markers[i].node == type))
				_self.map.remove(_self.markers[i].marker);
			}else{
				_self.map.remove(_self.markers[i].marker);
			}
			
		}
	};
	
	/**
	 * e 鼠标事件对象
	 */
	function getScreenPoint(e){
		return new SreenPoint({x:e.pixel.x, y:e.pixel.y});
	};
	
	/**
	 * e 鼠标事件对象
	 */
	function getMapPoint(e){
		return new MapPoint({'lng' : e.lnglat.lng, 'lat' : e.lnglat.lat});
	};
   

	//绘制管线图层
	this.drawArcgisTile = function(url,token,callback) {
		var _self = this;
		if(_self.mapLayer){
			mapLayer.setTileUrl(callback);
		} else {
			_self.mapLayer = new AMap.TileLayer({
				zIndex:20,
				getTileUrl: function(x,y,z){
					return url+'/'+ z +'/'+ y +'/'+ x+'?token='+token;
				}
			}); 
			_self.mapLayer.setMap(_self.map);
		}
	    return _self.mapLayer;
	};
	
	//重新加载arcgis管线图层
	this.reloadArcgisTile = function(){
		if(_self.mapLayer && _self.map){
			_self.mapLayer.setMap(_self.map);
		}
	}
	
	//画热力图
	this.drawHeatMap = function(heatMap) {
		var _self = this;
		var coordinatesList = [];
		if (heatMap.data.length > 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 */

引入高德地图

var MyMap = 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);
	};
};
MyMap.CLASS_NAME = "MyMap";

$(function(){
	var mapOption = {
			'mapWrap' : 'pipeMap',									//地图容器
			/*'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,
            'zoomend': function(mapPoint, screenPoint){
            	controlLayers(cntenMap.getZoom());
            },
			openSatelliteLayer:false
		};
	myMap = new MyMap(mapOption);
})

实现自己业务的代码，画点画线与信息框

$(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,
            'zoomend': function(mapPoint, screenPoint){
            	controlLayers(cntenMap.getZoom());
            },
            'click' : function(mapPoint, screenPoint){				//地图点击事件
				console.log('地图坐标：(' + mapPoint.lng + ', ' + mapPoint.lat +');屏幕坐标：(' + screenPoint.x + ',' + screenPoint.y + ')');
			},
			openSatelliteLayer:false
		};
	myMap = new MyMap(mapOption);
})
//所有已绘制的线和点
var lines = [],drawPoints = [];
var pipe= {
	
		/**
		 * 画线
		 */
		drawLine:function(points){
			if(!$.isEmptyArray(lines)){
				myMap.removeLine(lines[0]);
			}
			//画线
			var line = {
					'color' : '#FF0033',
					'width' : 3,
					pionts:points,
				};
			
			lineObj = myMap.drawLine(line);
			lines.push(lineObj);
		},
		
		/**
		 * 画点
		 */
		drawPoint:function(point){
			myMap.drawPoint(point);
			drawPoints.push(point);
		},
		
		/**
		 * 删除点
		 */
		removePoint:function(){
			if(!$.isEmptyArray(drawPoints)){
				for(var i=0;i<drawPoints.length;i++){
					myMap.removePoint(drawPoints[i].marker );
				}
			}
		}
	
}

实现画点业务

	var points = [];
		var data = retData.data;
		if(!$.isEmptyArray(data)){
			pipe.removePoint();
			for(var i=0;i<data.length;i++){
				if($.isEmptyStr(data[i].lng) || $.isEmptyStr(data[i].lat)){
					continue;
				}
				var point = {
					"lng":data[i].lng,
					"lat":data[i].lat,
				};
				points.push(point)
				var drawPoint = {
					"lng":data[i].lng,
					"lat":data[i].lat,
					"type":pointType[1]
				}
				if(0 == i){
					drawPoint.type = pointType[3]
				}
				else if((data.length - 1) == i){
					drawPoint.type = pointType[4]
				}
				var info = [];
			        info.push("<div class='input-card content-window-card'>");
			        info.push("<div style=\"padding:7px 0px 0px 0px;\">");
			        info.push("<p class='input-item'>开始时间:"+ data[i].startTime +"</p>");
			        info.push("<p class='input-item'>结束时间:"+ data[i].endTime +"</p>");
			        info.push("<p class='input-item'>检测人 :"+data[i].checkUser +"</p></div></div>");
				
				drawPoint.type["infowindow"] ={
						 content: info.join(""),
					     xoffset: 0,
					     yoffset:-31,
					     width:360,
					     height:100
					};
				drawPoint.type["onClick"] = function(point, e,i){
					debugger;
						pipe.showInfoWindow(point);		
				}
				pipe.drawPoint(drawPoint);
				
			}
			pipe.drawLine(points);
		}

其他方式使用

高德地图API

var AutoNaviMap = function(mapOption){
	
	this.map = null;													//高德autonavi地图对象
	
	var mapWrap = mapOption.mapWrap;									//地图容器
	
	var mapRange = mapOption.mapRange;									//地图范围
	var centerPoint = mapOption.centerPoint;							//中心点
	
	var mousetool = null;
	
	this.init = function(){
		var _self = this;
		if(!_self.map){ 
			var option = {resizeEnable : true,						//监控地图容器尺寸变化，默认为false
							zoom : 14, 							    //显示级别
							logo : false};
			if(centerPoint && !$.isEmptyObject(centerPoint)){					//设置中心点
				var transCoordinate = {};
				transCoordinate.lng = centerPoint.x;
				transCoordinate.lat = centerPoint.y;
				if(!mapOption.noTransAmap) {
					centerPoint.lng = centerPoint.x;
					centerPoint.lat = centerPoint.y;
					transCoordinate = _self.get_GCJLngLat(centerPoint);
        		}
				option['center'] = new AMap.LngLat(transCoordinate.lng, transCoordinate.lat);
			}
			_self.map = new AMap.Map(mapWrap, option);
			
            var title = new AMap.TileLayer({
                getTileUrl: function (x, y, z) {
                    var x0 = -400;
                    var y0 = 400;
                    var resolution = 1.1943;
                    var col = Math.floor((x - x0) / (256 * resolution));
                    var row = Math.floor((y - y0) / (256 * resolution));
                    var url = mapOption.dynamicMapServiceUrl+'/tile/' + z + '/' + y + '/' + x;
                                       // var url = 'https://114.115.205.250:6443/arcgis/rest/services/BeiJingGas/DemoPip/MapServer/tile/' + z + '/' + y + '/' + x;
                    return url+'?token=';
                }, zIndex: 20
            });
            title.setMap(_self.map);
			//地图单击事件
			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(mapRange && !$.isEmptyObject(mapRange)){						//设置地图范围
				var bounds = new AMap.Bounds([mapRange.xmin, mapRange.ymin],[mapRange.xmax, mapRange.ymax]);
				_self.map.setBounds(bounds);
			}
			//工具条
			if(mapOption.isAddNavigationControl) {
				AMap.plugin(["AMap.ToolBar"], function() {
					_self.map.addControl(new AMap.ToolBar());
				});
			}
			if(mapOption.isAddControl) {
				AMap.plugin(['AMap.MapType'],function(){
					_self.map.addControl(new AMap.MapType());
			    });
			}
		}
	};
	
	this.drawLine = function(mLine){
		debugger;
		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 = coordinateEntry;
	        		if(!mLine.noTransAmap) {
	        			transCoordinate = _self.get_GCJLngLat(coordinateEntry);
	        		}
		            coordinatesList.push(new AMap.LngLat(transCoordinate.lng, transCoordinate.lat));
	        	}
	        });
	        if(coordinatesList.length>0) {
	        	polyLine = new AMap.Polyline({
	        		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)) {
				/*var infowindow = new AMap.InfoWindow({
					content:mLine.infowindow.content,
					offset:new AMap.Pixel(mLine.infowindow.xoffset,mLine.infowindow.yoffset),
					size:new AMap.Size(mLine.infowindow.width,mLine.infowindow.height)
				});*/
	        	if(!$('body').find('#infowindow').length>0) {
	        		var html = '<div id="infowindow" style="position:absolute;display:none" class="box_wraper"><div class="box_con"><p></p></div><div class="box_img"><img src="/platform/images/box_img.png"/></div></div>';
	        		$('body').append(html);
	        	}
				polyLine.on('mouseover',function(e) {
//					infowindow.open(_self.map,e.target.getPosition());
					$('body').find('#infowindow p').html(mLine.infowindow.content);
					$('#infowindow').show();
					//获取地图容器在浏览器中的偏移
					var offset = $('#'+ mapWrap).offset();
					$('#infowindow').css("left",e.pixel.x-$('#infowindow').width()/2 + offset.left);
					$('#infowindow').css("top",e.pixel.y-$('#infowindow').height() + offset.top);
				});
				polyLine.on('mouseout',function(e) {
//					infowindow.close();
					$('#infowindow').hide();
				});
			}
	    }
	    return polyLine;
	};
	
	this.drawPoint = function(mPoint){
		debugger;
		var _self = this;
		var transCoordinate = mPoint;
		//若不是从天地图转换为高德地图，则不用转换坐标系
		if(!mPoint.noTransAmap) {
			transCoordinate = _self.get_GCJLngLat(mPoint);
		}
		var marker = {};
		if(mPoint.lng && mPoint.lat && Number(mPoint.lng)>0 && Number(mPoint.lat)>0){
			var icon = new AMap.Icon({
				size : new AMap.Size(mPoint.type.width,mPoint.type.height),
				imageSize: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);
			
			if(mPoint.type.onClick && $.isFunction(mPoint.type.onClick)) {
				marker.on('click',function(e){	
					debugger;
					mPoint.type.onClick(e.target.getExtData(),e);
				});  //点事件的获取
			}
		}
		if(mPoint.type.infowindow && !$.isEmptyObject(mPoint.type.infowindow)) {
			/*var infowindow = new AMap.InfoWindow({
				content:mPoint.type.infowindow.content,
				offset:new AMap.Pixel(mPoint.type.infowindow.xoffset,mPoint.type.infowindow.yoffset),
				size:new AMap.Size(mPoint.type.infowindow.width,mPoint.type.infowindow.height)
			});*/
			if(!$('body').find('#infowindow').length>0) {
				var html = '<div id="infowindow" style="position:absolute;display:none" class="box_wraper"><div class="box_con"><p></p></div><div class="box_img"><img src="/platform/images/box_img.png"/></div></div>';
				$('body').append(html);
			}
			marker.on('mouseover',function(e) {
//				infowindow.open(_self.map,e.target.getPosition());
				$('body').find('#infowindow p').html(mPoint.type.infowindow.content);
				var tmpPixel = _self.map.lngLatToContainer(e.target.getPosition());
				$('#infowindow').show();
				//获取地图容器在浏览器中的偏移
				var offset = $('#'+ mapWrap).offset();
				$('#infowindow').css("left",tmpPixel.x-$('#infowindow').width()/2 + offset.left);
				$('#infowindow').css("top",tmpPixel.y-$('#infowindow').height() + offset.top - Math.abs(e.target.getOffset().y));
			});
			marker.on('mouseout',function(e) {
//				infowindow.close();
				$('#infowindow').hide();
			});
		}
		return marker;
	};
	
	
	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.get_GCJLngLat = function(mPoint) {
		var retObj = {};
		var CT = new CoordinateTransform(mPoint.lat, mPoint.lng, CoordinateSys.WGS84);//CoordinateSys.WGS84 是转换前的坐标系
        if (CT.WGS84ToBD09()== 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;
	};
	
	/**
	 * 设置中心点
	 * lng 纬度
	 * lat 经度
	 */
	this.centerAt = function(lng, lat){
		this.map.setCenter(new AMap.LngLat(lng, lat));
	};
	
	/**
	 * 设置标记
	 */
	this.markPoint = function(lng, lat){
//		return this.map.Marker({
//			position: new AMap.LngLat(lng, lat),
//			map: _self.map
//			});
		return  new AMap.Marker({
			position: new AMap.LngLat(lng, lat),
			map: _self.map
			});
	};
	/**
	 * 删除点
	 * point 为map地图对象， drawPoint时返回
	 */
	this.removePoint = function(point){
		this.map.remove(point);
	};
	/**
	 * 删除线
	 * line 为map地图对象， drawLine时返回
	 */
	this.removeLine = function(line){
		this.map.remove(line);
	};
	/**
	 * 设置级别
	 * zoom  Number
	 */
	this.setZoom = function(zoom){
		this.map.setZoom(zoom);
	};
	/**
	 * 获取可视区域
	 */
	this.getBounds = function(){
		//TODO 返回MapBounds 对象
		var bounds = this.map.getBounds();
//		alert('lng:' + bounds.xmin + ';lat:' + bounds.ymin);	//左下角， 西南坐标
//		alert('lng:' + bounds.xmax + ';lat:' + bounds.ymax);	//右上角， 东北坐标
		return new MapBounds(bounds.southwest.lng, bounds.southwest.lat, bounds.northeast.lng, bounds.northeast.lat);
	}
	
	/**
	 * e 鼠标事件对象
	 */
	function getScreenPoint(e){
		return new SreenPoint({x:e.pixel.x, y:e.pixel.y});
	};
	
	/**
	 * e 鼠标事件对象
	 */
	function getMapPoint(e){
		return new MapPoint({'lng' : e.lnglat.lng, 'lat' : e.lnglat.lat});
	};
	
	/**
	 * 显示弹框
	 */
	this.showInfoWindow = function(infoWindow){
      var _self = this;
      _self.infoWindow = new AMap.InfoWindow({
          content: infoWindow.content  //使用默认信息窗体框样式，显示信息内容
      });
      _self.infoWindow.open(this.map, [infoWindow.lng, infoWindow.lat]);
	}; 
	
	/**
	 * 圈选覆盖物
	 */
	this.selectOverlay = function(callBack){
		var _self = this;
		AMap.plugin(["AMap.MouseTool"], function() {
			_self.map.setDefaultCursor("crosshair");
	        mousetool = new AMap.MouseTool(_self.map);
			//通过rectOptions更改拉框放大时鼠标绘制的矩形框样式
	        var rectOptions = {
                strokeStyle: "solid",
                strokeColor: "#FF0000",
                fillColor: "#C0C0C0",
                fillOpacity: 0.5,
                strokeOpacity: 1,
                strokeWeight: 2
	        };
	        mousetool.rectangle(rectOptions);    
	        AMap.event.addListener(mousetool ,"draw",function(e){
	        	var curBounds = e.obj.getBounds();
	        	var allPoints = _self.map.getAllOverlays("marker");
	        	var resultMarker = [];
	        	for(var i = 0; i<allPoints.length;i++) {
	        		if(curBounds.contains(allPoints[i].getPosition())) {
	        			resultMarker.push(allPoints[i].getExtData());
	        		}
	        	}
	        	_self.map.remove(e.obj);
	        	mousetool.close();
	        	_self.map.setDefaultCursor("pointer");
	        	if($.isFunction(callBack)) {
	        		callBack(resultMarker);
	        	}
	        });
		 });
	};
};
AutoNaviMap.CLASS_NAME = "AutoNaviMap";

引入mapload.js 初始化js

var tiledMapServiceURL="";
var pipelineMapServiceURL = "http://1246:8080/arcgis/rest/services/gis/MercatorPip/MapServer";

                              
var geometryServiceURL = "";
var companylat;

function mapLoad(){
    if (companylat && companylat != "null" && companylat != "" && companylat != '""') {
    } else {
        companylng = 532000;
        companylat = 358000;
    }
    var mapOption = {
            'mapWrap' : 'map_con',                     //地图容器
            'dynamicMapServiceUrl' : pipelineMapServiceURL,
            'tiledMapServiceUrl' : tiledMapServiceURL,
            'mapRange' : {
                'xmin' : 409439.40635501774,
                'ymin' : 328530.8110858157,
                'xmax' : 630292.6726449793,
                'ymax' : 394303.4774500003
            },
            'centerPoint' : {
                'x' :companylng ,
                'y' :companylat
            },       //中心点
            'mapClass' : AutoNaviMap,              //地图组件
            //地图点击事件
            'click' : function(mapPoint, screenPoint){
                //console.log('地图坐标：(' + mapPoint.lng + ', ' + mapPoint.lat +');屏幕坐标：(' + screenPoint.x + ',' + screenPoint.y + ')');
            },
            'wkid':4326
        };
   map = new Map(mapOption);
}
function loadMap() {
    var mapOption = {
            'mapClass' : ArcgisMap, 
            'mapWrap' : 'map_con',
            'dynamicMapServiceUrl' : pipelineMapServiceURL,
            'tiledMapServiceUrl' : tiledMapServiceURL,
            'mapRange' : {
                'xmin' : 409439.40635501774,
                'ymin' : 328530.8110858157,
                'xmax' : 630292.6726449793,
                'ymax' : 394303.4774500003
            },
            'centerPoint' : {
                'x' : 532000,
                'y' : 358000
            },
            'wkid' : 21420
    };
    map = new Map(mapOption);
}

/*通过服务获取信息*/
function GetInfoByPost(url, params, isAsync,callback) {
    //var params = {"companyID": companyid, "types": type, "name": name}
    $.ajax({
        type: "post",
        url: url,
        data: params,
        async: isAsync, // 设置成同步
        success: function(json) {
            if (json.retStatus == 1) {
                callback(json);
            }else {
                alert(json.message);
            }
        }
    });
}

自定义地图API js

var Map = 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);
	};
	/**
	 * 根据覆盖物设置合适的视野
	 */
	this.setFitView = function() {
		this.map.setFitView();
	};
	
	/**
	 * 删除点
	 * point 为map地图对象， drawPoint时返回
	 */
	this.removePoint = function(point){
		this.map.removePoint(point);
	}
	
	/**
	 * 删除线
	 * line 为map地图对象， drawLine时返回
	 */
	this.removeLine = function(line){
		this.map.removeLine(line);
	}
	
	/**
	 * 设置中心点
	 * lng 经度
	 * lat 纬度
	 */
	this.centerAt = function(lat, lng){
		this.map.centerAt(lat, lng);
	}
	
	/**
	 * 设置级别
	 * 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.showInfoWindow = function(infoWindow){
		this.map.showInfoWindow(infoWindow);
	}
};
Map.CLASS_NAME = "Map";

加载地图组件

var root = null;
var Map;
var initZoom = 14;

window.onload=function(){
	root = $("#root").val();
	init();
}

function init(){
	mapLoad();
	Map.map.map.onZoomStart = function() {
	}
	Map.map.map.onUpdateStart = function() {
	}
	Map.centerAt('116.397477', '39.908692');
	Map.setZoom(initZoom);
}

function drowLine(pionts, color){
	var mLine = {
		'pionts' : pionts,
		'color' : color,
		'width' : 3,
		'onClick' : function(line, e) {
				if($.isFunction(onclick)){
					onclick(line, e);
				}
			}
	};
	return Map.drawLine(mLine);
}

function markPoint(x, y, markData, flag){
	Map.markPoint(x, y);
}

function getAll(){
	$.ajax({
		type : "POST",
		url : root + "/getAllInfo",
		data : {},
		success : function(illegalPlaceData){
			for(var i=0; i < illegalPlaceData.GL_ILLEGAL_PLACE.length; i++){
				x = Data.PLACE[i].data.PLACE_X;
				y = Data.PLACE[i].data.PLACE_Y;
				illegalPlacePoints.push(drowPoint(x, y, 'wzzy.png', PLACE[i], 'ZY', function(point,e){
					var screenPoint = {x:e.clientX, y:e.clientY};
					var content = infoWindowStrategy(point);
					var infoWindow = {content:content.html, lng:e.lnglat.lng, lat:e.lnglat.lat};
					Map.showInfoWindow(infoWindow);			
				}));
			}
		}
	});
}

function getExceptionInfo(){
	$.ajax({
		type : "POST",
		url : root + "/getExceptionInfo",
		data : {},
		success : function(exceptionData){
			for(var i=0; i < exceptionData.POINT.length; i++){
				x = exceptionData.POINT[i].data.LEAKPOINT_X;
				y = exceptionData.POINT[i].data.LEAKPOINT_Y;
				exceptionPoints.push(drowPoint(x, y, 'psd.png', exceptionData.GL_LEAKPOINT[i], 'PSD', function(point,e){
					var screenPoint = {x:e.clientX, y:e.clientY};
					var content = infoWindowStrategy(point);
					var infoWindow = {content:content.html, lng:e.lnglat.lng, lat:e.lnglat.lat};
					Map.showInfoWindow(infoWindow);			
				}));
			}
		}
	});
}

function drowPoint(zbx, zby, img, pdata, flag, onclick) {
	
	var point = {
		'lng' : zbx,
		'lat' : zby,
		"flag":flag,
		"data":pdata,
		"onclick":onclick,
		'type' : {
			'imgUrl' : root + "/platform/cusviews/complex/images/" + img, 
			"height" : 25,
			"width" : 25,
			"xoffset" : 0,
			"yoffset" : 1,
			'onClick' : function(p,e) {
				if($.isFunction(p.onclick)){
					p.onclick(p,e);
				}
			}
		}
	};
    return Map.drawPoint(point);
}

function infoWindowStrategy(point){
	var html = null;
	var width = 0;
	if(point.flag == "WZZY"){
		var html =  "<div class=\"tip_con\" style=\"width:260px;height:auto\">"+
		"	   <div class=\"tip_tab tab_tipb\">"+
		"		档案		"+
		"		 <div class=\"turn\" style=\"display: block; opacity: 1;\">"+
		"			<div class=\"tip_table\">"+		
						"<table cellspacing='0' cellpadding='0' border='0'>" +
						"<tr><td width='50'>名称：</td><td width='*'>"+(point.data.data.NAME||"")+"</td></tr>"+
						"<tr><td width='50'>单位：</td><td width='*'>"+(point.data.data.ORG||"")+"</td></tr>" +
						"<tr><td width='50'>地址：</td><td width='*'>"+(point.data.data.ADDRESS||"")+"</td></tr>" +
						"<tr><td width='80'>坐标X(经度)：</td><td width='*'>"+(point.data.data.PLACE_X||"")+"</td></tr>" + 
						"<tr><td width='80'>坐标Y(纬度)：</td><td width='*'>"+(point.data.data.PLACE_Y||"")+"</td></tr>" +
						"</table>"+
	    "			</div>"+
		"		 </div>"+
		     "</div>" +
			"</div>";
	}
	
	return {"html":html,"width":280};
}

function openBasic(id){
	var href = root + '/platform/views/StdListView.jsp?func=WELL&extWhere=and GL_GATEWELL_ID='+id;
	showWindow("档案", href);
}

function clearMap(){
	removePoint(gateWellPoints);
	removePoint(illegalPlacePoints);
	removePoint(exceptionPoints);
	removePoint(userPoints);
	removePoint(anodePilePoints);
	removePoint(mashroomPoints);
	cMap.removeLine(trajectoryLine);
	$("#userCheckbox").attr("checked",false);
}

function removePoint(points){
	for(var i=0; i < points.length; i++){
		Map.removePoint(points[i]);
	}
}

function showWindow(title,url){
	windowView(title);
	setTimeout(function(){
		winFormDesigner.loadURL(url);
	}, 0);
}

function windowView(title){
	var options = {
			modal : true,
			title : title,
			collapsible : false,
			minimizable : false,
			maximizable : false,
			closable : true,
			closed : false
		};
		var uid = "self_card_";
		options["id"] = uid;
		winFormDesigner = UIFactory.getUI(uid);
		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"] = 0;
		newSize["top"] = 0;
		newSize["width"] = jQuery("body").width();
		newSize["height"] = jQuery("body").height();
		winFormDesigner.window("resize", newSize);
}

具体使用

初始化地图组件

	var point1 = {
			'lng' : zbx,
			'lat' : zby,
			"flag":flag1,
			"data":pdata,
			'type' : {
				'imgUrl' : root + "/platform/cusviews/complex/images/" + img, 
				"height" : 25,
				"width" : 25,
				"xoffset" : 0,
				"yoffset" : 1
			}
		};
		var content1 = infoWindowStrategy(point1);
		var even={};
		even.target={};
		even.target.getPosition = function(){
			return {lng:zbx, lat:zby,O:parseFloat(zbx)+(116.23146639084285-116.22542672247853),P:parseFloat(zby)+(39.815803909704194 - 39.81458279123017)};
		}
		var infoWindow1 = {content:content1.html, even:even};
		Map.centerAt(zbx, zby);
		Map.showInfoWindow(infoWindow1);
}

function playLine(){
	
	var lineArr = [];
	$.ajax({
		type : "POST",
		url : "/queryLine",
		data : {'userId' : userId},
		success : function(retData){
			for(var i=0; i < retData[1].pointsKey.length; i++){
				
				for(var j=0;j<retData[0][retData[1].pointsKey[i]].length;j++){
					lineArr.push({'lng':retData[0][retData[1].pointsKey[i]][j].data.POINT_LNT, 'lat':retData[0][retData[1].pointsKey[i]][j].data.POINT_LAT});
				}
				Line.push(drowGjs(lineArr));
				lineArr.length=0;
			}	
		}
	});
}

function drowGjs(dataList){
	
	startPoints.push(drowPoint1(dataList[0].lng,dataList[0].lat,'qdzb.png',dataList[0],"",""));

	endPoints.push(drowPoint1(dataList[dataList.length-1].lng,dataList[dataList.length-1].lat,"zb.png",dataList[dataList.length-1],"",""));

	return drowLine(dataList, '#ff00cc');
}

画点

function showPoints(_this) {
	var sbItems = $(_this);
	if (sbItems.attr("checked")) {// 选中发送请求话点
		var param = $(sbItems).val();
		doAjax(param, function(list) {
			var ps = new Array();
			for(var i=0;i<list.length;i++){
				var map = list[i];
				var y = '513659.98';//map.Ypoint;
				var x = '304492.51';//map.XPoint;
				var point = drowPoint(x,y,"",function(piont,e){
					alert(11);
				});
				ps.push(point);
			}
			points[param] = ps;
		});
	} else {// 删除点
		var ps = points[$(sbItems).val()];
		if(ps){
			for(var i=0;i<ps.length;i++){
				cntenMap.removePoint(ps[i]);
			}
		}
		points[$(sbItems).val()] = null;
	}
}


//画点
function drowPoint(pointx, pointy, pointImg, onclick) {
	var point = {
		'lng' : pointy,
		'lat' : pointx,
		'type' : {
			'imgUrl' : root + "/static/images/qshg.png",
			"height" : 18,
			"width" : 18,
			"xoffset" : 0,
			"yoffset" : 9,
			'onClick' : function(point, e) {
				if($.isFunction(onclick)){
					onclick(point,e);
				}
				
			}
		}
	};
    return Map.drawPoint(point);
}

画线

$.ajax({
			type : "POST",
			url : getContextPath() + "/getChilds",
			data : {"ids" : ids},
			success : function(data) {
				if (data) {
					$.each(data,function(id,list){
						var points = [];
						for(var i=0;i < list.length; i++){
							x = list[i].data.XLJCXX_DETAIL_ZBX;
							y = list[i].data.XLJCXX_DETAIL_ZBY;
							points.push({'lng' : y, 'lat' : x});
							var mPoint = drowPoints(x, y, "QIU",id,list[i].data, function(point,e){
								lineClick(point,e);
							});
						}
						drowLine(points, lineClick);
					});
				}
			}	
		});

wespten

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
高德地图API的开发与代码编写

高德地图API的开发与代码编写高德地图底层源码/** 高德autonavi 地图API Define：begin */var AutoNaviMap = function(mapOption){ this.map = null; //高德autonavi地图对象 this.mapWrap = mapOption.mapWrap; //...
复制链接

扫一扫