使用高德地图api实现web端查看地图轨迹
程序员文章站
2022-05-15 17:13:48
...
一实现效果：存入数据库的地址经纬度在地图上查看轨迹。
可放大缩小查看详细地址：
主要的地方在于运用高德地图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>
上一篇： 拿来主义之_异或加解密