高德地图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 infoWindowthis.polygon;this.init = function(){debugger;var self = this;if(!self.map){ var option = {resizeEnable : true,                                //监控地图容器尺寸变化，默认为falsezoom : 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,                        //监控地图容器尺寸变化，默认为falsezoom : 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);});}}   });

高德地图API的开发与代码编写相关推荐

[WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程
前端时间因为公司需要研究了一下百度的教程然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去"高德 ...
高德地图api 地理编码（地址--＞坐标）geocoder.getLocation在官方可以测试出结果，下载代码到本地却用不了问题解决
问题高德地图api 地理编码(地址-->坐标)功能,通过输入地址信息得到经纬度信息.geocoder.getLocation在官方可以测试出结果,下载代码到本地却用不了. 官方示例测试, ...
接口获取行政区划代码_行政区域查询-API文档-开发指南-Web服务 API | 高德地图API...
产品介绍行政区域查询是一类简单的HTTP接口,根据用户输入的搜索条件可以帮助用户快速的查找特定的行政区域信息. 使用API前您需先申请Key,若无高德地图API账号需要先申请账号. 例如:中国> ...
android开发之高德地图API篇：1、高德地图API之实时定位+轨迹可视化
TIME:2020年7月6日高德地图API之实时定位+轨迹可视化前言: step1.工程的配置 step2.显示地图 step2.实现静态定位: step3.实时定位 step4.实现轨迹可视化: ...
【高德地图API】那些年我们一起开发的APP—即LBS应用模式分享
2019独角兽企业重金招聘Python工程师标准>>> 摘要:利用地图API都能做些什么应用呢?应用商店里所有的分类,都可以结合上LBS来丰富应用.除了传统的生活服务应用,还有新潮的 ...
项目 - Web地图开发【高德地图API】(一)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
js室内地图开发_概述-室内地图 JS API | 高德地图API
室内地图 JavaScript API 简介说明: 室内地图数据对新用户暂停开放,建议您使用 Javascript API 可实现室内外一体化效果. 高德室内地图 JavaScript API,是由 ...
项目 - Web地图开发【高德地图API】(二)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
java高德地图api开发平台_【高德地图API】从零开始学高德JS API（一）地图展现...
摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合m ...

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

高德地图API的开发与代码编写相关推荐

最新文章

热门文章