`

百度地图画点、线、面函数封装

阅读更多
$(document).ready(function(){
	$("#dwtr").hide();
	//百度地图初始化
	initMap();
	//加载大类下拉列表
	doBigTypeList();
	//加载到地图上
	loadAllCompDetail("");
	var lxid=$("#lxid").val();
	if(lxid!=""&&lxid!=null){
		$("#dwtr").show();
		getComponentInfo(lxid);
		$("#title").html('<font size="4" color="#0072bc"><b>修改页面</b></font>');
	}else{
		$("#colortr").hide();
		$("#title").html('<font size="4" color="#0072bc"><b>增加页面</b></font>');
	}
	//加载热区
	loadGridHotArea();
	//按钮样式
	showImsg("dwbut,savebut,resetbut");
});

var bmap="";
//绘图标识
var drawflag=0;
var pointarr=[];
var pointstr="";
var polygon="";
var linepointarr=[];
var linepointstr="";
var polyline="";
var marker="";
var clng="";//中心点经度
var clat="";//中心点纬度
var a="";//经度最大值
var b="";//纬度最大值
var c="";//经度最小值
var d="";//纬度最小值
//数组
var compmarkerarr1=[];
var compmarkerarr2=[];
var compmarkerarr3=[];
var comppolyline=[];
var comppolygon=[];
//缩放级别数组
var zoom2darr=[14,15,16,17,18,19];
var zoom3darr=[8,9,10,11,12,13];
var vertflag=0;
//区域数组
var gridareaarr=[];
var gridlabel=[];

function getComponentInfo(lxid){
	$.ajax({
	   	  async:false,
          type: "POST",               
          dataType: "json",               
          url: ctxPath+'/componentDetailAction.do?dispatch=getComponentInfoByid',
          data:"lxid="+lxid,   
          success: function(data) {
          		var assemblytype=data.assemblytype;
          		$("#assemblyname").val(data.assemblyname);
          		$("#bigtype").val(data.bigtype);
          		doSmallTypeList();
          		$("#smalltype").val(data.smalltype);
          		$("#assemblytype").val(assemblytype);
          		$("#tcolor").val(data.tcolor);
	        	$("#tcolor").css("background-color",data.tcolor);
	        	if(data.tcolor==""||data.tcolor==null){
	        		$("#tcolor").val('#39b778');
	        		$("#tcolor").css("background-color",'#39b778');
	        	}
          		if(assemblytype=="1"){
          			$("#colortr").hide();
          			$("#pointlng1").val(data.pointlng);
	        		$("#pointlat1").val(data.pointlat);
          		}else if(assemblytype=="2"){
		        	$("#pointlng2").val(data.pointlng);
		        	$("#pointlat2").val(data.pointlat);
		        	$("#tpoints2").val(data.tpoints);
          		}else if(assemblytype=="3"){
          			$("#pointlng3").val(data.pointlng);
		        	$("#pointlat3").val(data.pointlat);
		        	$("#tpoints3").val(data.tpoints);
          		}
          }
    });
}

//加载大类下拉列表
function doBigTypeList(){
	$.ajax({
		   async:false,
           type: "POST",               
           dataType: "json",               
           url: ctxPath+'/componentAction.do?dispatch=doCompBTSelectList',   
           success: function(data) {
           	var obj=document.getElementById('bigtype'); 
        	 	obj.options.add(new Option("--请选择--","")); 
        	 	for(var i=0;i<data.length;i++){
        	 		obj.options.add(new Option(data[i].supername,data[i].superid)); 	
        	 	}
           }
       });  
} 

//根据大类id加载小类下拉列表
function doSmallTypeList(){
	$("#smalltype").html("");
	var superid=$("#bigtype").val();
	if(superid!=""&&superid!=null){
		$.ajax({
		   async:false,
           type: "POST",               
           dataType: "json",               
           url: ctxPath+'/componentAction.do?dispatch=doCompSTSelectList', 
           data:"superid="+superid, 
           success: function(data) {
           		var obj=document.getElementById('smalltype'); 
        	 	obj.options.add(new Option("--请选择--","")); 
        	 	for(var i=0;i<data.length;i++){
        	 		obj.options.add(new Option(data[i].smallname,data[i].smallid)); 	
        	 	}
           }
       });  
	}else{
		var obj=document.getElementById('smalltype'); 
        obj.options.add(new Option("--请选择--","")); 
	}
	
}

//点击类型下拉框
function onAssemblyTypeChange(){
	var assemblytype=$("#assemblytype").val();
	if(assemblytype=="2"||assemblytype=="3"){
		$("#colortr").show();
	}else{
		$("#colortr").hide();
	}
} 

//添加监听
function addMapListener(){
	var assemblytype=$("#assemblytype").val();
	if(assemblytype==""){
		alert("请选择类型!");
	}
	drawflag="1";
	bmap.addEventListener("click", function(e){
		addLabelArea(e);
	});
}

//删除监听
function removeMapListener(){
	drawflag="0";
	bmap.removeEventListener("click", function(e){
		addLabelArea(e);
	});
}

function addLabelArea(e){
	var curmaptype=bmap.getMapType();
	//坐标转换类
	var ctool=new CoorTools(bmap); 
	var assemblytype=$("#assemblytype").val();
	if(assemblytype=="1"){//点
		if(drawflag=="1"){
			if(marker!=""){
				bmap.removeOverlay(marker);
			}
			//清空面标注信息
			if(polygon!=""){
				bmap.removeOverlay(polygon);
			}
			pointarr=[];              
			$("#tpoints3").val("");
			//清空线标注信息
			if(polyline!=""){
				bmap.removeOverlay(polyline);
			}
			linepointarr=[];              
			$("#tpoints2").val("");
			clng=e.point.lng;
			clat=e.point.lat;
			marker = new BMap.Marker(e.point);  // 创建标注
			bmap.addOverlay(marker);			// 将标注添加到地图中
			if(curmaptype._name=="MyMap"){
				var point3=new BMap.Point(clng,clat);
				var point2=ctool.coor2Baidu(point3);
				clng=point2.lng;
				clat=point2.lat;
	        }
			$("#pointlng1").val(clng);
			$("#pointlat1").val(clat);
		}
	}else if(assemblytype=="2"){//线
		if(drawflag=="1"){
			if(polyline!=""){
				bmap.removeOverlay(polyline);
			}
			if(marker!=""){
				bmap.removeOverlay(marker);
			}
			//清空面标注信息
			if(polygon!=""){
				bmap.removeOverlay(polygon);
			}
			pointarr=[];              
			$("#tpoints3").val("");	
			var npoint=new BMap.Point(e.point.lng,e.point.lat);	
			clng=e.point.lng;
			clat=e.point.lat;
			linepointarr.push(npoint);
			var tcolor=$("#tcolor").val();
			polyline=new BMap.Polyline(linepointarr,{strokeColor:tcolor,strokeWeight:2,strokeOpacity:0.8});
			bmap.addOverlay(polyline);
			linepointstr=fromArrayToString(linepointarr);
			if(curmaptype._name=="MyMap"){
				var tempstr="";
				var tpointstr=linepointstr.split(",")
				for(var i=0;i<tpointstr.length;i+=2){
					var tlng=tpointstr[i];
					var tlat=tpointstr[i+1];
					var point=new BMap.Point(tlng,tlat);
					var npoint=ctool.coor2Baidu(point);
					tempstr+=npoint.lng+","+npoint.lat+",";
				}
				linepointstr=tempstr.substring(0,(tempstr.length-1));
				var point3=new BMap.Point(clng,clat);
				var point2=ctool.coor2Baidu(point3);
				clng=point2.lng;
				clat=point2.lat;
	        }
			$("#tpoints2").val(linepointstr);
			$("#pointlng2").val(clng);
			$("#pointlat2").val(clat);
		}
	}else if(assemblytype=="3"){//面
		if(drawflag=="1"){
			if(polygon!=""){
				bmap.removeOverlay(polygon);
			}
			if(marker!=""){
				bmap.removeOverlay(marker);
			}
			//清空线标注信息
			if(polyline!=""){
				bmap.removeOverlay(polyline);
			}
			linepointarr=[];              
			$("#tpoints2").val("");	
			var npoint=new BMap.Point(e.point.lng,e.point.lat);	
			//获取经度和纬度的最大最小值
			if(pointarr.length==0){
				a=e.point.lng;
				b=e.point.lat;
				c=e.point.lng;
				d=e.point.lat;
			}else{
				if(a<e.point.lng){
					a=e.point.lng;
				}
				if(b<e.point.lat){
					b=e.point.lat;
				}
				if(c>e.point.lng){
					c=e.point.lng;
				}
				if(d>e.point.lat){
					d=e.point.lat;
				}
			}
			clng=(a+c)/2;
			clat=(b+d)/2;
			pointarr.push(npoint);
			var tcolor=$("#tcolor").val();
			polygon=new BMap.Polygon(pointarr,{fillOpacity:0.2,fillColor:tcolor,strokeColor:tcolor,strokeWeight:2,strokeOpacity:0.8});
			bmap.addOverlay(polygon);
			pointstr=fromArrayToString(pointarr);
			if(curmaptype._name=="MyMap"){
				var tempstr="";
				var tpointstr=pointstr.split(",")
				for(var i=0;i<tpointstr.length;i+=2){
					var tlng=tpointstr[i];
					var tlat=tpointstr[i+1];
					var point=new BMap.Point(tlng,tlat);
					var npoint=ctool.coor2Baidu(point);
					tempstr+=npoint.lng+","+npoint.lat+",";
				}
				pointstr=tempstr.substring(0,(tempstr.length-1));
				var point3=new BMap.Point(clng,clat);
				var point2=ctool.coor2Baidu(point3);
				clng=point2.lng;
				clat=point2.lat;
	        }
			$("#tpoints3").val(pointstr);
			$("#pointlng3").val(clng);
			$("#pointlat3").val(clat);
		}
	}
	
}

//重置
function clearform(){
	if(marker!=""){
		bmap.removeOverlay(marker);
	}
	//清空面标注信息
	if(polygon!=""){
		bmap.removeOverlay(polygon);
	}
	//清空线标注信息
	if(polyline!=""){
		bmap.removeOverlay(polyline);
	}
	$("#assemblyname").val("");
	$("#pointlng1").val("");
	$("#pointlat1").val("");
	$("#pointlng2").val("");
	$("#pointlat2").val("");
	$("#pointlng3").val("");
	$("#pointlat3").val("");
	$("#bigtype").val("");
	$("#smalltype").val("");
	$("#assemblytype").val("");
	//清空点字符串
	pointarr=[];
	$("#tpoints3").val("");
	linepointarr=[];
	$("#tpoints2").val("");
}

//将点数组转化为字符串
function fromArrayToString(pointarr){
	var pointstr=""; 
	for(var i=0;i<pointarr.length;i++){
		pointstr+=pointarr[i].lng+","+pointarr[i].lat+",";
	}
	pointstr=pointstr.substring(0,(pointstr.length-1));
	return pointstr;
}

//将字符串转化为点数组
function fromStringToArray(pointstr){
	var pointarr=[];
	var tpoints=pointstr.split(",")
	for(var i=0;i<tpoints.length;i+=2){
		var tlng=tpoints[i];
		var tlat=tpoints[i+1];
		var tpoint=new BMap.Point(tlng,tlat);
		pointarr.push(tpoint);
	}
	return pointarr;
}

//加载
function loadAllCompDetail(ctypeid){
	var curjgid=$("#curjgid").val();
	$.ajax({
		async:false,
        type: "POST",               
        dataType: "json",               
        url: ctxPath+'/componentDetailAction.do?dispatch=getComponentMapList', 
        data: "curjgid="+curjgid+"&ctypeid="+ctypeid,
        success: function(data) {
        	for(var i=0;i<data.length;i++){
        		var obj=data[i];
        		addCoverObj(obj);
        	}
        }
    });
}

//添加覆盖物
function addCoverObj(obj){
	var curmaptype=bmap.getMapType();
	//坐标转换类
	var ctool=new CoorTools(bmap); 
	var tpoints=obj.tpoints;
	var tcolor=obj.assemblycolor;
	var pointlng=obj.longitude;
	var pointlat=obj.latitude;
	var assemblyname=obj.assemblyname;
	var assemblytype=obj.assemblytype;
	var timg=obj.assemblyicon;
	if(tcolor==""||tcolor==null){
		tcolor='red';
	}
	var iconImg = new BMap.Icon(ctxPath+timg, new BMap.Size(20,50),{
    	imageOffset: new BMap.Size(0,0),
    	offset:new BMap.Size(0,0)
    });
	if(assemblytype=="1"){//点
		var cpoint=new BMap.Point(pointlng,pointlat);
		if(curmaptype._name=="MyMap"){
			cpoint=ctool.coor2Baidu3D(cpoint);
	    }	
	    var marker1 = new BMap.Marker(cpoint,{icon:iconImg,title:assemblyname,offset:new BMap.Size(0,-24)});
	    bmap.addOverlay(marker1);
	    compmarkerarr1.push(marker1);
	}else if(assemblytype=="2"){//线
		if(tpoints!=""&&tpoints!=null){
			if(curmaptype._name=="MyMap"){
				var tempstr="";
				var tpointstr=tpoints.split(",")
				for(var i=0;i<tpointstr.length;i+=2){
					var tlng=tpointstr[i];
					var tlat=tpointstr[i+1];
					var point=new BMap.Point(tlng,tlat);
					var npoint=ctool.coor2Baidu3D(point);
					tempstr+=npoint.lng+","+npoint.lat+",";
				}
				tpoints=tempstr.substring(0,(tempstr.length-1));
	        }
			var opointarr=fromStringToArray(tpoints);
			var polyline1=new BMap.Polyline(opointarr,{strokeColor:tcolor,strokeWeight:2,strokeOpacity:0.8});
			bmap.addOverlay(polyline1);
			comppolyline.push(polyline1);
			var cpoint=new BMap.Point(pointlng,pointlat);
			if(curmaptype._name=="MyMap"){
				cpoint=ctool.coor2Baidu3D(cpoint);
		    }	
		    var marker1 = new BMap.Marker(cpoint,{icon:iconImg,title:assemblyname,offset:new BMap.Size(0,-24)});
		    bmap.addOverlay(marker1);
		    compmarkerarr2.push(marker1);
		}
	}else if(assemblytype=="3"){//面
		if(tpoints!=""&&tpoints!=null){
			if(curmaptype._name=="MyMap"){
				var tempstr="";
				var tpointstr=tpoints.split(",")
				for(var i=0;i<tpointstr.length;i+=2){
					var tlng=tpointstr[i];
					var tlat=tpointstr[i+1];
					var point=new BMap.Point(tlng,tlat);
					var npoint=ctool.coor2Baidu3D(point);
					tempstr+=npoint.lng+","+npoint.lat+",";
				}
				tpoints=tempstr.substring(0,(tempstr.length-1));
	        }
			var opointarr=fromStringToArray(tpoints);
			var polygon1=new BMap.Polygon(opointarr,{fillOpacity:0.2,fillColor:tcolor,strokeColor:tcolor,strokeWeight:2,strokeOpacity:0.8});
			bmap.addOverlay(polygon1);
			comppolygon.push(polygon1);
			var cpoint=new BMap.Point(pointlng,pointlat);
			if(curmaptype._name=="MyMap"){
				cpoint=ctool.coor2Baidu3D(cpoint);
		    }	
		    var marker1 = new BMap.Marker(cpoint,{icon:iconImg,title:assemblyname,offset:new BMap.Size(0,-24)});
		    bmap.addOverlay(marker1);
		    compmarkerarr3.push(marker1);
		}
	}
}

//保存
function doSaveComponentDetail(){
	var pointlng="";
	var pointlat="";
	var tpoints="";
	var tcolor=$("#tcolor").val();
	var assemblyname=$("#assemblyname").val();
	var bigtype=$("#bigtype").val();
	var smalltype=$("#smalltype").val();
	var assemblytype=$("#assemblytype").val();
	var lxid=$("#lxid").val();
	var curjgid=$("#curjgid").val();
	if(assemblyname==""){
		alert("名称不能为空!");
		return false;
	}
	if(bigtype==""){
		alert("请选择大类!");
		return false;
	}
	if(smalltype==""){
		alert("请选择小类!");
		return false;
	}
	if(assemblytype==""){
		alert("选择类型!");
		return false;
	}
	if(assemblytype=="1"){
		pointlng=$("#pointlng1").val();
		pointlat=$("#pointlat1").val();
		if(pointlng==""||pointlat==""){
			alert("您还没有在地图上标注位置!");
			return false;
		}
	}else if(assemblytype=="2"){
		tpoints=$("#tpoints2").val();
		if(tpoints==""){
			alert("您还没有在地图上标注位置!");
			return false;
		}
		pointlng=$("#pointlng2").val();
		pointlat=$("#pointlat2").val();
	}else if(assemblytype=="3"){
		tpoints=$("#tpoints3").val();
		if(tpoints==""){
			alert("您还没有在地图上标注位置!");
			return false;
		}
		pointlng=$("#pointlng3").val();
		pointlat=$("#pointlat3").val();
	}
	$.ajax({
        type: "POST",               
        dataType: "json",               
        url: ctxPath+'/componentDetailAction.do?dispatch=saveComponentDetail', 
        data: "pointlng="+pointlng+"&pointlat="+pointlat+"&tpoints="+tpoints+"&tcolor="+tcolor+"&assemblyname="+assemblyname
        	+"&bigtype="+bigtype+"&smalltype="+smalltype+"&assemblytype="+assemblytype+"&lxid="+lxid+"&curjgid="+curjgid,
        success: function(msg) {
        	if(lxid==""){//增加
        		if(msg=="1"){
	        		$("#assemblyname").val("");
	        		$("#pointlng1").val("");
	        		$("#pointlat1").val("");
	        		$("#pointlng2").val("");
	        		$("#pointlat2").val("");
	        		$("#pointlng3").val("");
	        		$("#pointlat3").val("");
	        		$("#bigtype").val("");
					$("#smalltype").val("");
					$("#assemblytype").val("");
					pointarr=[];              
					$("#tpoints3").val("");
					linepointarr=[];              
					$("#tpoints2").val("");
	        		alert("添加成功!");
	        		if(assemblytype=="1"){
	        			for(var i=0;i<compmarkerarr1.length;i++){
	        				bmap.removeOverlay(compmarkerarr1[i]);
	        			}
	        			compmarkerarr1=[];
	        		}else if(assemblytype=="2"){
	        			for(var i=0;i<compmarkerarr2.length;i++){
	        				bmap.removeOverlay(compmarkerarr2[i]);
	        			}
	        			compmarkerarr2=[];
	        			for(var i=0;i<comppolyline.length;i++){
	        				bmap.removeOverlay(comppolyline[i]);
	        			}
	        			comppolyline=[];
	        		}else if(assemblytype=="3"){
	        			for(var i=0;i<compmarkerarr3.length;i++){
	        				bmap.removeOverlay(compmarkerarr3[i]);
	        			}
	        			compmarkerarr3=[];
	        			for(var i=0;i<comppolygon.length;i++){
	        				bmap.removeOverlay(comppolygon[i]);
	        			}
	        			comppolygon=[];
	        		}
	        		loadAllCompDetail(assemblytype);
	        		removeMapListener();
	        	}else{
	        		alert("添加失败!");
	        	}
        	}else{//修改
        		if(msg=="1"){
        			pointarr=[]; 
        			linepointarr=[];                 
        			if(assemblytype=="1"){
	        			for(var i=0;i<compmarkerarr1.length;i++){
	        				bmap.removeOverlay(compmarkerarr1[i]);
	        			}
	        			compmarkerarr1=[];
	        		}else if(assemblytype=="2"){
	        			for(var i=0;i<compmarkerarr2.length;i++){
	        				bmap.removeOverlay(compmarkerarr2[i]);
	        			}
	        			compmarkerarr2=[];
	        			for(var i=0;i<comppolyline.length;i++){
	        				bmap.removeOverlay(comppolyline[i]);
	        			}
	        			comppolyline=[];
	        		}else if(assemblytype=="3"){
	        			for(var i=0;i<compmarkerarr3.length;i++){
	        				bmap.removeOverlay(compmarkerarr3[i]);
	        			}
	        			compmarkerarr3=[];
	        			for(var i=0;i<comppolygon.length;i++){
	        				bmap.removeOverlay(comppolygon[i]);
	        			}
	        			comppolygon=[];
	        		}
	        		loadAllCompDetail(assemblytype);
        			alert("修改成功!");
        			removeMapListener();
        		}else{
	        		alert("修改失败!");
	        	}
        	}
        }
    });
}

var dwmarker="";
function doDingwei(){
	var curmaptype=bmap.getMapType();
	//坐标转换类
	var ctool=new CoorTools(bmap);   
	if(dwmarker!=""){
		bmap.removeOverlay(dwmarker);
		dwmarker="";
	}
	var assemblytype=$("#assemblytype").val();
	var pointlng="";
	var pointlat="";
	if(assemblytype=="1"){
		pointlng=$("#pointlng1").val();
		pointlat=$("#pointlat1").val();
	}else if(assemblytype=="2"){
		pointlng=$("#pointlng2").val();
		pointlat=$("#pointlat2").val();
	}else if(assemblytype=="3"){
		pointlng=$("#pointlng3").val();
		pointlat=$("#pointlat3").val();
	}
	var iconImg = new BMap.Icon(ctxPath+"/images/dw.gif", new BMap.Size(45,45),{
    	imageOffset: new BMap.Size(0,0),
    	offset:new BMap.Size(0,0)
    });
	var dwpoint=new BMap.Point(pointlng,pointlat);
	if(curmaptype._name=="MyMap"){
		dwpoint=ctool.coor2Baidu3D(dwpoint);
    }
	dwmarker= new BMap.Marker(dwpoint,{icon:iconImg,offset:new BMap.Size(0,0)});
	bmap.addOverlay(dwmarker);
	bmap.panTo(dwpoint);
	setTimeout(function(){
		if(dwmarker!=""){
			bmap.removeOverlay(dwmarker);
			dwmarker="";
		}
	},3000)
}

//加载热区
function loadGridHotArea(){
	var curjgid=$("#curjgid").val();
	$.ajax({
		async:false,
        type: "POST",               
        dataType: "json",               
        url: ctxPath+'/gridOrgAction.do?dispatch=getGridOrgById', 
        data: "lxid="+curjgid,
        success: function(data) {
       		var obj=new Object();
       		obj.reseauarea=data.tpoints;
       		obj.tcolor=data.tcolor;
       		obj.pointlng=data.pointlng;
       		obj.pointlat=data.pointlat;
       		obj.reseauname=data.reseauname;
       		addGridCoverObj(obj);
        }
    });
}

//添加覆盖物
function addGridCoverObj(obj){
	var curmaptype=bmap.getMapType();
	//坐标转换类
	var ctool=new CoorTools(bmap); 
	var tpoints=obj.reseauarea;
	var tcolor=obj.tcolor;
	var pointlng=obj.pointlng;
	var pointlat=obj.pointlat;
	var reseauname=obj.reseauname;
	if(tcolor==""||tcolor==null){
		tcolor='red';
	}
	if(tpoints!=""&&tpoints!=null){
		if(curmaptype._name=="MyMap"){
			var tempstr="";
			var tpointstr=tpoints.split(",")
			for(var i=0;i<tpointstr.length;i+=2){
				var tlng=tpointstr[i];
				var tlat=tpointstr[i+1];
				var point=new BMap.Point(tlng,tlat);
				var npoint=ctool.coor2Baidu3D(point);
				tempstr+=npoint.lng+","+npoint.lat+",";
			}
			tpoints=tempstr.substring(0,(tempstr.length-1));
        }
		var opointarr=fromStringToArray(tpoints);
		var polygon1=new BMap.Polygon(opointarr,{fillOpacity:0.2,fillColor:tcolor,strokeColor:tcolor,strokeWeight:2,strokeOpacity:0.8});
		bmap.addOverlay(polygon1);
		gridareaarr.push(polygon1);
		var cpoint=new BMap.Point(pointlng,pointlat);
		if(curmaptype._name=="MyMap"){
			cpoint=ctool.coor2Baidu3D(cpoint);
	    }	
		var myLabel = new BMap.Label(reseauname,     //为lable填写内容    
			{offset:new BMap.Size(-15,-15),    //label的偏移量,为了让label的中心显示在点上    
				position:cpoint
		}); 
		bmap.addOverlay(myLabel);
		gridlabel.push(myLabel);  
	}
}

 

分享到:
评论

相关推荐

    基于 React 封装的百度地图组件,帮助你轻松的接入地图到 React 项目中,支持 React Hook

    1. 显示地图:组件能够加载百度地图并展示在页面上,可以通过props设置初始中心点、缩放级别等地图属性。 2. 地图交互:支持地图的点击、拖拽等交互事件,这些事件可以通过React的事件处理机制进行监听和响应。 3. ...

    echarts+百度地图实现个人轨迹-点随线顺序移动

    在本文中,我们将深入探讨如何使用ECharts与百度地图结合,来实现个人轨迹的动态展示,其中亮点是点随线顺序移动的效果。ECharts是一款基于JavaScript的数据可视化库,而百度地图则是国内广泛应用的地图服务提供商。...

    百度地图鼠标画圆、画多边形DEMO

    本文将深入探讨“百度地图鼠标画圆、画多边形DEMO”这一主题,它为开发者提供了一种方便的方式来动态地在地图上绘制图形,如圆形和多边形。 首先,我们要了解的是“百度地图API”。百度地图API是百度公司提供的一个...

    Android实现百度地图两点画弧线

    "Android实现百度地图两点画弧线" Android实现百度地图两点画弧线是 Android 开发者中一个常见的需求,通过使用百度地图 SDK 可以轻松实现。下面我们将详细介绍 Android 实现百度地图两点画弧线的相关知识点。 一...

    百度地图js版api几何图形绘制保存到数据库并展示

    前端再次接收到这些数据后,可以使用百度地图API的`new BMap.Polygon()`等构造函数重新创建图形实例,并将其添加到地图上。注意,为了保持图形与地图的同步,可能需要监听地图的`zoom_changed`事件,以便在缩放时...

    百度地图 图层 多边形

    本话题主要关注如何在百度地图上实现点、线、面的图层展示,特别是多边形的绘制。 首先,我们需要了解百度地图API的基础知识。百度地图API是一个JavaScript接口,它允许开发者在网页中嵌入地图,并通过JavaScript...

    Unity接百度地图测试工程

    通常,这涉及到在Start()或Awake()方法中调用百度地图SDK的初始化函数,传入我们的API密钥。 4. **显示地图**:使用Unity的UI系统,创建一个RawImage组件来展示地图。然后,通过设置RawImage的Texture属性为百度...

    百度地图绘制实时路线以及最短线路规划

    至于**绘制**功能,不仅包括在地图上画出起点到终点的路径,还包括展示沿途的地标、兴趣点、交通标志等。在前端,这通常通过SVG、Canvas或者WebGL等技术实现,配合百度地图API提供的路径描边、填充等方法,用户可以...

    基于 React 封装的百度地图组件,支持 React Hook,帮助你轻松的接入地图到 React 项目中。.zip

    在这个特定的案例中,我们有一个针对百度地图的React组件,它允许开发者通过props传递配置参数,如地图中心点坐标、缩放级别、地图类型等,从而在页面上渲染出地图。 React Hook是React 16.8版本引入的新特性,它...

    百度地图api 地图api 实例

    开发者可以通过调用百度地图API的`initMap()`函数来实现这一点。 其次,定位功能是地图API的另一大亮点。百度地图API提供了获取用户当前位置的能力,这在移动应用中尤其有用。例如,可以使用`getCurrentPosition()`...

    百度地图开发文档

    meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" /&gt; &lt;meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" /&...

    百度地图api 轨迹回放

    在本文中,我们将深入探讨如何使用百度地图API实现轨迹回放功能。百度地图API是一个强大的工具,它允许开发者集成地图功能到网页应用中,包括显示地图、定位、路径规划等。在JavaScript环境下,我们可以利用其...

    MFC控件调用百度地图

    本文将深入探讨如何在MFC应用中集成并调用百度地图API,以便为用户提供地理定位、地图展示及导航等功能。下面,我们将详细讲解这个过程,包括必要的步骤和关键代码。 首先,我们需要在MFC项目中添加一个用户控件,...

    winform C# 实现百度地图

    在C# WinForm应用中实现百度地图功能,主要涉及到几个关键知识点:WinForm控件的使用、WebBrowser组件、JavaScript与C#之间的交互以及百度地图API。以下将详细阐述这些内容。 1. **WinForm控件**:WinForm是.NET ...

    百度地图显示多个标注点

    在使用百度地图API时,有时候我们需要在地图上显示多个标注点来表示不同的地理位置信息,比如店铺分布、公交站点等。这篇博客"百度地图显示多个标注点"提供了关于如何实现这一功能的技术指南。以下是对该主题的详细...

    VB调用百度地图示例

    在VB(Visual Basic)编程环境中,我们可以利用API接口来调用外部服务,如百度地图,以便在应用程序中集成地图功能。这个"VB调用百度地图示例"是关于如何在VB程序中集成百度地图API,实现地图显示以及平移至特定坐标...

    delphi百度地图源码

    Delphi百度地图源码是一个基于Delphi编程语言实现的项目,它允许开发者在不依赖额外插件的情况下,集成百度地图API来实现全球地图的显示、定位、导航等功能。这个源码已经过调试,确保可以正常运行,对于学习和开发...

    百度地图离线API 2.0(含示例,可完全断网访问)

    2.包含拉框放大,测距,画线,打印等功能(已修改工具源码,支持右键取消放大,测距手势) 3.自定缩放级别显示指定标签 4.快速定位及隐藏指定类型 注意事项: 1.该示例不包含地图瓦片,所以访问时无背景(可以点击切片/...

    调用百度地图的接口,实现小地图

    在IT行业中,地图服务已经成为...通过封装这些步骤,你可以轻松地在各种项目中集成百度地图小地图功能。同时,记得在实际开发中考虑性能优化、用户体验以及兼容性问题,确保地图功能在不同设备和浏览器上都能正常工作。

    百度地图开发代码集合(标注、坐标、右键菜单、常用功能)

    百度地图API提供了内置的转换函数,方便开发者进行坐标转换。 **右键菜单**是一种常见的用户交互方式,可以在地图上提供额外的功能选项。通过监听鼠标右键点击事件,结合DOM操作,开发者可以创建自定义的右键菜单。...

Global site tag (gtag.js) - Google Analytics