百度地图--作图和保存路线经纬度

最新推荐文章于 2021-06-04 09:19:35 发布

qq513283439

最新推荐文章于 2021-06-04 09:19:35 发布

阅读量9.2k

点赞数 1

本文链接：https://blog.csdn.net/qq5132834/article/details/11022933

版权

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script type="text/javascript" src="${path}/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${path}/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="${path}/jquery-easyui-1.3.2/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="${path}/jquery-easyui-1.3.2/themes/icon.css" type="text/css"></link>
<script type="text/javascript" src="${path}/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
   body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4&ak=b4585dbd0052e322d380466d630031f0"></script>

</head>

<body >
   <div id="allmap"></div> 
</body>
</html>
<script type="text/javascript">

   // 百度地图API功能
   var map = new BMap.Map("allmap");

   map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打开
    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport(); //允许自动调节窗体大小

   map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); //第一中心位置

   var linesPoints = new Array();                         //存放沿路的点
   var spoi1 = new BMap.Point(116.380967,39.953285);       // 起点1
   var epoi = new BMap.Point(116.400000,39.910000);       // 终点
   var myIcon = new BMap.Icon("${path}/image/police.png", new BMap.Size(32, 70), {imageOffset: new BMap.Size(0, 0)}); //图片的偏移量。为了是图片底部中心对准坐标点。


   map.clearOverlays();                                                    // 清空覆盖物
    var driving3 = new BMap.DrivingRoute(map,{onSearchComplete:drawLine}); // 驾车实例,并设置回调
    //var driving3 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); //驾车实例(带起点和终点图标)
    driving3.search(spoi1, epoi);                                       // 搜索一条线路，即得到一个驾车方案   回调drawline



/*
   //这个函数的功能是动画
   function run(){

       for(var m = 0;m < linesPoints.length; m++){
          var pts = linesPoints[m];
          var len = pts.length;
          var carMk = new BMap.Marker(pts[0],{icon:myIcon});
          map.addOverlay(carMk); //绘制曲线
        resetMkPoint(1,len,pts,carMk)
    }

    function resetMkPoint(i,len,pts,carMk){
        carMk.setPosition(pts[i]);
        if(i < len){
            setTimeout(function(){
                i++;
                resetMkPoint(i,len,pts,carMk);
            },100);
        }
    }

   }

*/

    //画图    回调函数
   function drawLine(results){

       var planObj = results.getPlan(0);
       var b = new Array();       //用来保存路线上面的点

       // 绘制驾车步行线路
        var route = planObj.getRoute(0);       //取得第1条路线
        var points = route.getPath();            //取得第1条路线中的所有路径经纬度点
        for(var i = 0; i < points.length; i++){
               b.push(points[i]);
               console.info(i);
        }
        // 驾车线路

        var pp = []; //经纬度点数组
        var lat = [];
        var lng = [];
        for(var j=0;j<points.length;j++){
           //console.info(points[j].lat+"..tttt||tttt.."+points[j].lng); //在控制台上打印信息
           lat[j] = points[j].lat;
           lng[j] = points[j].lng;
           var po = new BMap.Point(points[j].lng,points[j].lat); //定义一个地图的经纬度点
           pp.push(po);   //将点压数组
           var bb = new BMap.Polyline(pp); //绘制经纬度点数组
           map.addOverlay(bb);
        }
        console.info(lat);
        console.info(lng);

       $.ajax({
           type: "POST",
           dataType: "json",
           url: "${path}/BaiduMapController/baiduMapAddRoutePoint.do",
           data:{
               lat:lat,
               lng:lng
           }
       });

        //map.addOverlay(new BMap.Polyline(points));
         //map.addOverlay(new BMap.Polyline(route.getPath(), {strokeColor: "#0030ff",strokeOpacity:0.7,strokeWeight:6,enableMassClear:true}));
        map.setViewport(b); //调整地图的最佳视野为显示标注数组point
       // 终点
       //addMarkerFun(results.getEnd().point,1,1);
       // 开始点
       //addMarkerFun(results.getStart().point,1,0);
       //alert(results.getEnd().point.lat+"--"+results.getEnd().point.lng);
       //alert(results.getStart().point.lat+"--"+results.getStart().point.lng);
       linesPoints[linesPoints.length] = b;
   }



//   setInterval(function(){run();},3000); //多次调用run函数，周期3000毫秒

</script>