使用高德地图api实现web端查看地图轨迹

末蓝、 2022-06-08 10:18 296阅读 0赞

# 一实现效果：存入数据库的地址经纬度在地图上查看轨迹。 #

![Center][]

## 可放大缩小查看详细地址： ##

![Center 1][]

### 主要的地方在于运用高德地图api，后台只起到查询作用，与一般无异这里不多赘述后台 ###

map.html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>轨迹回放</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=1a01722744d7d1bc6a29d1321853b93f"></script>
    
    <script src="/source/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/source/My97DatePicker/WdatePicker.js"></script> 
    <link rel="stylesheet" href="/source/css/dxt.css"/>
    <style>
    #mapContainer{height:88%;width:98%; margin:5px auto; position:relative; border:2px solid rgb(255,255,255) }
    </style>
    <body class="bg" >
    <div class="main_layout">
    
      <div class="title"> 
      <form>
      <label>任务时间：</label> <input id="d4311" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}',isShowClear:false,readOnly:true})"/> 
      <input type="button" value="搜索">
       </form>
      </div>
      
      <div id="mapContainer"></div>
     </div> 
      <script>
        var map;
       $(function(){
    	   init();
    	   getAjax();
    	  //绑定事件 
    	  $(".title input[type='button']").click(submitSerch);
       });
       var submitSerch=function(){
    	        var reg=/^([0-9]|[\-])*$/;
    	        var start=$("#d4311").val().trim();
    			 var end=$("#d4312").val().trim();
    			 var name=$(".name").val().trim();
    			 var ehr=$(".ehr").val().trim();
    			 
    	        if(start||end||name||ehr) {
    	         getAjax(start,end,name,ehr);
                }
    	   };
       function getAjax(start,end,name,ehr){
    	   $.ajax({
    		   url:"/taskTrajectory/selectTaskTrajectoryInfo",
    		   type:"get",
               dataType:"json",
               data:{"account":"15614141414",
            	     "taskTime":"2017-09-21"},
               success: function(data){ 
                 //初始化请求
                if(data!=null&&data.status==0){
                var result=data.result;
                if(result.length==0){
                  alert("抱歉，您当前没有访调轨迹！");
                }
                  //清楚显示
                  map.clearMap(); 
    			  line(result);	
    			  addMarker(result);
    			  }else{
    			  alert("您没有访调记录");
    			     }
    			 },
    		        });
    
    	   }
       
       
       function init(){
    	   //创建地图对象
    	  map = new AMap.Map("mapContainer", {
          resizeEnable: true,
          zoom: 12,
          mapStyle:"light"
         });
        
    	 //加载缩放条事件  
          map.plugin(["AMap.ToolBar"], function () {
          toolBar = new AMap.ToolBar();
          map.addControl(toolBar);
    	  
        });
    	 
    	   }
       function line(data){
    	   var lineArr =new Array();
    	   
    	   $.each(data,function(index,value){
    	   
    	    var array=(value.position).split(","); 
                lineArr.push(new AMap.LngLat(parseFloat(array[1]),parseFloat(array[0])));
    					});	
          // 绘制轨迹
         var polyline = new AMap.Polyline({
            map: map,
            path:lineArr,
            strokeColor: "rgb(104,180,255)",  //线颜色
            strokeOpacity: 1,     //线透明度
            strokeWeight: 2,      //线宽
            strokeStyle: "solid", //线样式
            geodesic: true       
          });
       map.setFitView(); 
    	 
    	 }
    	  
       function addMarker(data) {
    	   
     $.each(data,function(index,value){
     var array=(value.position).split(",");	 
     var p0 = parseFloat(array[1]);
     var p1 = parseFloat(array[0]);
     var action="AMAP_ANIMATION_DROP";
     var point = new AMap.LngLat(p0, p1);
     var marker = new AMap.Marker({
    	    id:index,
            map: map,
            position: point,
    	    icon:"/source/img/flag.png",
            autoRotation: true,
    		animation:action
    	 
    		}); 
    createInfoWindow(value,marker);
    		
    	});			   
    }
    function createInfoWindow(value, marker) {
    var info = [];
    /* info.push("<a href='/emplpyer/task/get/"+value.id+"' target='main'  ><div style='font-weight:bold;color:#000;font-family:'微软雅黑';text-align:center;font-size:'><div><img src='http://wiscc6911.qnoddns.org.cn:8400/file/web/download/10143.jpg' width='80' height='80'> "); */
    info.push("任务: "+value.taskName+"");
    info.push("时间 : "+value.taskTime+"");
    info.push("地址 :"+value.taskAddress+"</div></div></a>");
    
     var iw = new AMap.InfoWindow({
    	 content : info.join("<br>"),
    	 offset : new AMap.Pixel(0,-25),
    	 isCustom : false,
    	 autoMove : true
     });
     
     AMap.event.addListener(marker, "mouseover", function(e) {
     iw.open(map, marker.getPosition());
     });
    }
    
    
      </script>
    </body >
    
    </html>

[Center]: /images/20220608/8b9f30c76dc040949e25c459035663bf.png
[Center 1]: /images/20220608/4af5e5e96a204bdc9115e521e939f6e7.png