百度地图根据经纬度绘制路径

最新推荐文章于 2024-04-16 15:46:57 发布

zqdfound

最新推荐文章于 2024-04-16 15:46:57 发布

阅读量4.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_41396619/article/details/83338636

版权

<!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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script>
	<title>区域展示</title>
<script src="http://c.cnzz.com/core.php"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <input id="begin" type="text"><button id="change">调换</button><input id="end" type="text"><button id="setPoint">确定</button><button id="delPoint">清除</button>
    <input id="site" type="text"><button onclick="copyText()">copy</button><span id="span" style="color:red"></span>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    $("#change").click(function(){
        $("#begin").val($("#end").val());
        $("#end").val("");
    })

    $("#setPoint").click(function(){
        var begin = $("#begin").val().split(",");
        var end = $("#end").val().split(",");
        drawPoint(begin[0],begin[1],end[0],end[1]);
        
    });
    $("#delPoint").click(function(){
        var begin = $("#begin").val().split(",");
        var end = $("#end").val().split(",");
        delPoint(begin[0],begin[1],end[0],end[1]);
    });

  function drawPoint(begin0,begin1,end0,end1){
	   var polyline1 = new BMap.Polyline([
		    new BMap.Point(begin0,begin1),//起始点的经纬度
		    new BMap.Point(end0,end1)//终止点的经纬度
		    ], {strokeColor:"red",//设置颜色 
		    strokeWeight:5, //宽度
		    strokeOpacity:1});//透明度
	   map.addOverlay(polyline1); 
       
   }
   function delPoint(begin0,begin1,end0,end1){
	   var lines = map.getOverlays();
	   map.removeOverlay(lines[lines.length-1]);
       
   }
	var linesPoints = null;
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(118.803572,32.066121), 15);  // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
	map.setCurrentCity("南京");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
   
    map.addEventListener("click",function(e){
        $("#span").text("");
        $("#site").val(e.point.lng+","+e.point.lat);
    });

  function copyText() {
      var input = $("#site");
      input.select(); // 选中文本
      document.execCommand("copy"); // 执行浏览器复制命令
      $("#span").text("复制成功");
    } 
 
</script>

zqdfound

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
百度地图根据经纬度绘制路径

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-
复制链接

扫一扫