<!DOCTYPE html>
<html style="width: 100%; height: 100%;">
<head>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nGySXbEo38xSOIslt3KWVIW7N9Tayipr"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script src="layui/layui.js"></script>
<script src="js/jquery/jquery-1.11.3.min.js"></script>
<meta charset="UTF-8">
<title>百度地圖運行軌跡Demo</title>
<style>
#up-map-div{
top:20px;
left:200px;
background: rgba(0, 0, 0, 0) none repeat scroll !important;/* rgba(0, 0, 0, 0.2) 前三個確定顏色，最後0.2確定透明度 */
position:absolute;
z-index:9999;
border:2px solid blue;
background-color:#FFFFFF;
}
</style>
</head>
<body style="width: 100%; height: 100%;">
<div class="layui-row" style="width: 100%; height: 100%;">
<div class="layui-container" style="width: 100%; height: 100%;">
<div class="layui-col-md2" style="overflow-x: auto; overflow-y: auto; height: 100%; width:300px;">
</div>
<div class="layui-col-md10" style="width: 75%; height: 100%;">
<div id="baiduMap" style="width: 100%; height: 100%;"></div>
<div id="up-map-div">
<button id="show">查看詳情</button>
<!--<span id="show">懸浮div，讓它懸浮在地圖上面</span>-->
</div>
</div>
</div>
</div>
</body>
<script>
var billData = {
ADJUST_REASON_EXPLAIN: null,
ADJUST_REASON_NAME: null,
AMT_COST_SUM: 9195.74,
CARRIER_NAME: "淮安市淮盛貨物運輸有限公司",
DELIVER_DATE: "2019-09-05",
FACT_NAME: "淮陰捲菸廠",
IS_SHARE_NAME: "否",
LATITUDE: 33.5,
LONGITUDE: 119.06,
ORDER_STATUS_NAME: "智能優化",
QTY_QUANTITY_SUM: 1125,
QTY_TRAY_SUM: 0,
QTY_WEIGHT_SUM: 20.455,
STOWAGE_ID: "10030799",
TRAN_TYPE_NAME: "汽運",
}
var mapData = [
{
BUSI_NAME: "蚌埠",
BUSI_STORE_CODE: "3634",
LATITUDE: 32.880051,
LONGITUDE: 117.323111,
QTY_QUANTITY_SUM: 300,
TRAN_ORDER_NO: 1,
},
{
BUSI_NAME: "信陽",
BUSI_STORE_CODE: "4380",
LATITUDE: 32.16,
LONGITUDE: 114.089,
QTY_QUANTITY_SUM: 825,
TRAN_ORDER_NO: 2,
}
]
//$("#showContext").hide();
map(billData,mapData);
function map(billData,mapData){
var point = []; //存儲商業公司圖經點
point.push(new BMap.Point(billData.LONGITUDE, billData.LATITUDE)); //轉換座標
for(var item in mapData){
var point1 = new BMap.Point(mapData[item].LONGITUDE, mapData[item].LATITUDE); //轉換座標
point.push(point1);
}
// 百度地圖API功能
var map = new BMap.Map("baiduMap"); // 創建Map實例
map.centerAndZoom(point[0], 13); //第一個參數可以是根據之前創建好的一個點爲中心，第二個參數是地圖縮放級別，最大爲19，最小爲0。
map.enableScrollWheelZoom(true);//開啓鼠標滾輪縮放
map.clearOverlays(); //清除地圖上所有的覆蓋物
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
map.addControl(top_left_control);
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_LARGE}); //右上角，完整的縮放平移
map.addControl(top_right_navigation);
var options = {
//renderOptions:{map: map, autoViewport: true},
onSearchComplete: function(results){
if (transit.getStatus() == BMAP_STATUS_SUCCESS){
// 獲取第一條方案
var plan = results.getPlan(0);
// 獲取方案的駕車線路
var route = plan.getRoute(0);
// 獲取每個關鍵步驟,並輸出到頁面
var polylinePoints = [];
for(var i = 1; i <= plan.getNumRoutes(); i++){
var pathArr = plan.getRoute(i - 1).getPath();
polylinePoints.push(pathArr);
}
// 自定義的路徑 線的顏色等
var polyline = new BMap.Polyline(plan.getRoute(0).getPath(), {
strokeColor: '#DC143C',
strokeWeight: '4',
strokeOpacity: '.8'
});
map.addOverlay(polyline);
addMark();//增加標杆
}
}
};
var transit = new BMap.DrivingRoute(map, options);
/* if(point.length>2){
transit.search(point[0], point[2],{waypoints:[point[1]]});//waypoints表示途經點
}else{
transit.search(point[0], point[1]);
}*/
for(var i=0;i<point.length-1;i++){
transit.search(point[i], point[i+1]);
}
// 設置中心點和地圖縮放級別
function setCenterAndZoom(result){
var cityName = result.name;
map.centerAndZoom(cityName,12);
}
function addMark(){
for(var i = 0 ; i< point.length ; i++){
var marker = new BMap.Marker(point[i]);
var opts = {
width : 100, // 信息窗口寬度
height: 100, // 信息窗口高度
title : "<h3><b>庫房位置信息</b></h3> " } // 信息窗口標題
map.addOverlay(marker);
if(i==0){
marker.addEventListener("click", function(e){
for(item in mapData){
var info = "<b>工廠:</b> "+billData.FACT_NAME+"<br/><b>總數量（件）:</b> "+billData.QTY_QUANTITY_SUM
var infoWindow = new BMap.InfoWindow(info, opts); // 創建信息窗口對象
this.openInfoWindow(infoWindow);
}
});
}else{
marker.addEventListener("click", function(e){
for(item in mapData){
if(mapData[item].LONGITUDE==e.target.point.lng
&& mapData[item].LATITUDE==e.target.point.lat){
console.log(mapData[item].QTY_QUANTITY_SUM)
var info = "<b>商業公司:</b> "+mapData[item].BUSI_NAME+"<br/><b>總數量（件）:</b> "+mapData[item].QTY_QUANTITY_SUM;
var infoWindow = new BMap.InfoWindow(info, opts); // 創建信息窗口對象
this.openInfoWindow(infoWindow);
}
}
});
}
if(i==0){
var lab1 = new BMap.Label("起點",{position:point[0]});
map.addOverlay(lab1);
}else if(i==point.length-1){
var lab3 = new BMap.Label("終點",{position:point[point.length-1]});
map.addOverlay(lab3);
}else{
var lab2 = new BMap.Label("途徑點",{position:point[i]});
map.addOverlay(lab2);
}
}
setTimeout(function(){
map.setViewport(point); //調整到最佳視野
},1000);
}
$("#show").click(function(){
var opts = {
width : 250, // 信息窗口寬度
height: 100, // 信息窗口高度
title : "<h3><b>詳情</b></h3>" // 信息窗口標題
}
var info = "<table><thead><th>編號</th><th>姓名</th><thead><tr><td>10001</td><td>張三</td></tr></table>"
var infoWindow = new BMap.InfoWindow(info, opts); // 創建信息窗口對象
map.openInfoWindow(infoWindow, map.getCenter()); // 打開信息窗口
});
}
</script>
</html>
效果圖:
