百度地圖路線規劃
阿新 • • 發佈：2019-01-21
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <!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> <style> .body-loading{ position: fixed; left: 50%; top: 50%; z-index:997; } .loading-shade{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:998; background-color:#000; opacity:0.3; filter:alpha(opacity=30); } .loading-container{ z-index: 999; width: 37px; height: 37px; top: 50%; left: 50%; margin-left:-19px; margin-top:-19px; border-radius: 100%; background: 0 0; box-shadow: none; border: none; position:absolute; } .loading-gif{ width: 37px; height: 37px; background: url(${base}/resources/images/loading.gif) no-repeat; } </style> <jsp:include page="../common/meta.jsp"></jsp:include> <title>地圖展示</title> </head> <body> <div id="allmap"></div> </body> </html> <!--_footer 作為公共模版分離出去--> <jsp:include page="../common/footer.jsp"></jsp:include> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD10f0575545bcd69168ca13b90a6bb9"></script> <script type="text/javascript"> //百度地圖API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(109.518557,18.258461), 13); // 初始化地圖,設定中心點座標和地圖級別 map.enableScrollWheelZoom(); var points = []; var memo = '${memo}'; // 隨機生成路線顏色 var getRandomColor = function(){ return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6); } if (memo != null && memo != "" && memo != undefined) { var arr = memo.split("-"); var count = 0; for (var i=0; i<arr.length; i++) { var obj = arr[i].split(","); var lat = obj[1]; var lng = obj[0]; if (lng != "" && lng != null && lng != undefined) { points.push(new BMap.Point(lng, lat)); count ++ ; } } if (count > 0) { addLoading(); // 模態框 var startPoint = points[0]; // 起點 var endPoint = points[points.length - 1]; // 終點 // 起點 var myIcon = new BMap.Icon("/resources/images/qidian.png", new BMap.Size(18, 24), { imageSize:new BMap.Size(18, 24), // 設定圖片大小 anchor: new BMap.Size(10,25) }); map.addOverlay(new BMap.Marker(startPoint, {icon: myIcon})); // 中心點 var center = Math.ceil(count / 2); map.centerAndZoom(points[center]); //建立線路 var polyline = new BMap.Polyline( points, //所有的GPS座標點 { strokeColor : getRandomColor(), // 線路顏色 //strokeColor : "#9F79EE", // 線路顏色 strokeWeight : 4, //線路大小 }); //繪製線路 map.addOverlay(polyline); removeLoading(); // 終點 var myIcon2 = new BMap.Icon("/resources/images/zhongdian.png", new BMap.Size(18, 24), { imageSize:new BMap.Size(18, 24), // 設定圖片大小 anchor: new BMap.Size(10,25) }); map.addOverlay(new BMap.Marker(endPoint, {icon: myIcon2})); } } function addLoading(){ $("body").append('<div class="body-loading"><div class="loading-shade"></div><div class="loading-container"><div class="loading-gif"></div></div></div>'); } function removeLoading(){ $("body").find(".body-loading").remove(); } </script>