zoukankan      html  css  js  c++  java
  • 百度地图 右键事件,右键标线,获取线编辑的点数据

    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    	<style type="text/css">
    		body, html{ 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    		#allmap {height:500px;  100%;}
    		#control{100%;}
    	</style>
    	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=tlvZ2HVUpgrgALADBBCsf43DenZV8mI6"></script>
    	<title>设置线、面可编辑</title>
    </head>
    <body>
         <div id="info"></div>
    	<div id="allmap"></div>
    	<div id="control">
    		<button onclick = "polyline.enableEditing();polygon.enableEditing();">开启线、面编辑功能</button>
    		<button onclick = "polyline.disableEditing();polygon.disableEditing();">关闭线、面编辑功能</button>
    		<button onclick = "getlinepoints();">获得线的编辑点</button>
    	</div>
    </body>
    </html>
    <script type="text/javascript">
    	// 百度地图API功能
    	var map = new BMap.Map("allmap");
    	map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
    	map.enableScrollWheelZoom();
    
    	var polyline = new BMap.Polyline([
    		new BMap.Point(116.399, 39.910),
    		new BMap.Point(116.405, 39.920),
    		new BMap.Point(116.423493, 39.907445)
    	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});   //创建折线
    	map.addOverlay(polyline);   //增加折线
    	
    	var polygon = new BMap.Polygon([
    		new BMap.Point(116.387112,39.920977),
    		new BMap.Point(116.385243,39.913063),
    		new BMap.Point(116.394226,39.917988),
    		new BMap.Point(116.401772,39.921364),
    		new BMap.Point(116.41248,39.927893)
    	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形
    	map.addOverlay(polygon);   //增加多边形
    	
    	
    	map.addEventListener("rightclick",function(e){   //单击地图,形成折线覆盖物
        newpoint = new BMap.Point(e.point.lng,e.point.lat);
        if(key==0){
        //    if(points[points.length].lng==points[points.length-1].lng){alert(111);}
            points.push(newpoint);  //将新增的点放到数组中
            polyline.setPath(points);   //设置折线的点数组
            map.addOverlay(polyline);   //将折线添加到地图上
            document.getElementById("info").innerHTML += "new BMap.Point(" + e.point.lng + "," + e.point.lat + "),</br>";    //输出数组里的经纬度
        }
    });
    	var key = 0;    //开关
    	var newpoint;   //一个经纬度
        var points = [];    //数组,放经纬度信息
    	function getlinepoints()
    	{
    	   var pts=polyline.getPath();
    	   alert(pts.length);
    	   var sss="";
    	   for(var i=0;i<pts.length;i++){
    		 sss+=i+": lng "+pts[i].lng+",lat "+pts[i].lat+"
    ";
    		}
    	   alert(sss);	   
    	}
    </script>

  • 相关阅读:
    git 命令
    Spring Boot Web应用开发 CORS 跨域请求支持
    layui demo
    jQuery jqGrid 4.7
    jQurey zTree Demo 3.5
    jQurey zTree API 3.5
    jQurey Select2 4.0
    jQurey Validation 1.16
    Laytpl 1.2
    My97DatePicker 4.8
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13317806.html
Copyright © 2011-2022 走看看