使用百度地图JavaScriptAPI画轨迹，给出自定义图标和标注_百度地图API计算轨迹长度资源-CSDN文库

共2个文件

jsp：2个

地图，轨迹

4星 · 超过85%的资源需积分: 45 101 浏览量 2018-02-07 16:42:07 上传评论 10 收藏 4KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

traceMap.rar （2个子文件）

traceMap

personTraceMap.jsp 4KB

traceDraw.jsp 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ include file="/common/include/include.jsp"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>轨迹地图</title> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=EU8e2jlYrLaumlp9ZsGHwgQrGCzxYcLg"></script>  <script type="text/javascript" src="<%=path %>/common/js/jquery-1.7.2.min.js"></script> <%--聚合点用--%> <script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> <script type="text/javascript" src="https://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script> <script type="text/javascript" src="<%=path %>/application/js/controlMap/MarkerClusterer/MarkerClusterer.js"></script> <%--end--%> <script type="text/javascript" src="<%=path %>/application/js/controlMap/MarkerTool/MarkerTool.js?v=5"></script>  <script type="text/javascript" src="<%=path %>/common/js/lhgdialog/lhgdialog.min.js"></script> <script type="text/javascript" src="<%=path %>/common/js/fh.dialog.js"></script> <script type="text/javascript" src="<%=path %>/common/js/common.js"></script> <script type="text/javascript" src="<%=path %>/common/js/FhFormSerializer.js"></script> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> //获取轨迹点坐标 var pointArr = []; <c:forEach items="${tracePoints}" var="point"> var lonlat = new BMap.Point(eval(${point.y}),eval(${point.x})); pointArr.push(lonlat); </c:forEach> var centerPoint = pointArr[Math.ceil(pointArr.length/2)]; console.log(centerPoint) // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 //放大缩小控件 map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.centerAndZoom(new BMap.Point(centerPoint.lng, centerPoint.lat), 13); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 drawTrace(pointArr,"${personTrace.policeId}","${personTrace.address}") function drawTrace(pointArr,code,address){ var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { scale: 0.6,//图标缩放大小 strokeColor:'#fff',//设置矢量图标的线填充颜色 strokeWeight: '2',//设置线宽 }); var icons = new BMap.IconSequence(sy, '10', '30'); var polyline =new BMap.Polyline(pointArr, { enableEditing: false,//是否启用线编辑，默认为false enableClicking: true,//是否响应点击事件，默认为true icons:[icons], strokeWeight:'8',//折线的宽度，以像素为单位 strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1 strokeColor:"#18a45b" //折线颜色 }); map.addOverlay(polyline); //增加折线 //设置标注的图标 var icon = new BMap.Icon("<%=path%>/application/images/controlMap/person.png",new BMap.Size(50,50),{ anchor: new BMap.Size(10, 40)}); //设置标注的经纬度 var marker = new BMap.Marker(new BMap.Point(pointArr[pointArr.length-1].lng,pointArr[pointArr.length-1].lat),{icon:icon}); //把标注添加到地图上 map.addOverlay(marker); var content = "<table>"; content = content + "<tr><td> 警号："+code+"</td></tr>"; content = content + "<tr><td> 户籍："+address+"</td></tr>"; content += "</table>"; var infowindow = new BMap.InfoWindow(content); marker.addEventListener("click",function(){ this.openInfoWindow(infowindow); }); } </script>

评论收藏

内容反馈