從後臺獲取位置資訊並定位在百度地圖上
阿新 • • 發佈：2019-02-09
<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{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";} #allmap{height:500px;width:100%;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的金鑰"></script> <title>城市名定位</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap");// 建立Map例項 map.centerAndZoom(new BMap.Point(116.331398,39.897445),12);// 初始化地圖,設定中心點座標和地圖級別 map.enableScrollWheelZoom(true);//開啟滑鼠滾輪縮放 map.addControl(new BMap.NavigationControl()); //新增平移縮放控制元件 map.addControl(new BMap.ScaleControl()); //新增比例尺控制元件 map.addControl(new BMap.OverviewMapControl({isOpen: true})); //新增縮略地圖控制元件 // 從後臺獲取物資位置資訊，並顯示在地圖上 $.ajax({ async:false, cache:true, url: "介面名稱", type: 'GET', success: function(result){ /*******介面返回資料格式如下所示： [ {"terminalPhoneNumber":"010648744548","vehicleID":"17Y206436H20171124202355","latitude":"34.188237","longitude":"109.002797","height":"1000","speed":"0","direct":"149","timestamp":"20171226101013","vehicleState":"0","demolitionAlarm":"0","ownerID":null,"ownerName":null}, {"terminalPhoneNumber":"013689249766","vehicleID":"17Y206050E20171115075837","latitude":"34.181929","longitude":"108.997819","height":"1000","speed":"0","direct":"196","timestamp":"20171229160248","vehicleState":"0","demolitionAlarm":"0","ownerID":null,"ownerName":null}, {"terminalPhoneNumber":"013227083663","vehicleID":"17Y206050E20171115080146","latitude":"34.183384","longitude":"108.995699","height":"1000","speed":"0","direct":"297","timestamp":"20180124134501","vehicleState":"4","demolitionAlarm":"1","ownerID":null,"ownerName":null}, {"terminalPhoneNumber":"013227083663","vehicleID":"17Y206465E20171125160629","latitude":"34.182493","longitude":"108.995408","height":"1000","speed":"0","direct":"117","timestamp":"20180125162537","vehicleState":"0","demolitionAlarm":"1","ownerID":null,"ownerName":null} ] ********/ if(result != undefined && result.length >0){ map.panTo(new BMap.Point(result[0].longitude, result[0].latitude)); //將地圖的中心點更改為從介面獲取的指定的點。 var longitude = [], latitude = [], vehicleID = [], alarm = []; for (var i = 0; i < result.length; i++) { //獲取每個物資的位置資訊及物資的捆包號資訊，位置資訊用來在地圖上顯示物資，捆包號用來通過捆包號查詢物資詳細資訊，以在滑鼠滑過此物資時顯示物資的詳細資訊。 longitude[i] = result[i].longitude;//物資經度 latitude[i] = result[i].latitude;//物資緯度 vehicleID[i] = result[i].vehicleID;//物資捆包號 alarm[i] = result[i].alarm;//物資上的終端被拆除的報警標誌資訊 var goodsId, goodsName, goodsType, goodsMaterial, goodsWeight, goodsTerminalNum, goodsStatus, pageOrigin, goodsOrigin, goodsPackage; /*** 通過物資捆包號獲取物資詳情資訊 ***/ $.ajax({ async:false, cache:true, url: "獲取詳情的介面?goodsPackage=" + vehicleID[i], type: 'GET', success: function(result){ /*******介面返回資料格式如下所示： { total:1, root:[ { "goodsContractreadtime":"2017-12-22 17:43:02", "goodsId":410, "goodsMaterial":"HRB500E", "goodsName":"螺紋鋼", "goodsNumber":1, "goodsOrder":"210174556", "goodsOrigin":"鋼廠", "goodsPackage":"17Y206465E20171125160629", "goodsQrnumber":"", "goodsQroperator":"", "goodsRemark":"鋼廠直髮", "goodsStatus":"6", "goodsTerminalNum":"", "goodsType":"Φ25", "goodsVehiclenumber":"1578496", "goodsWarranty":"70463335", "goodsWeight":3.4649999141693115, "originName":"河鋼承鋼" } ] } ********/ var result = eval('('+ result +')'); var resultContent = result.root; if (result.root.length != 0) { goodsId = resultContent[0].goodsId; goodsName = resultContent[0].goodsName; goodsType = resultContent[0].goodsType; goodsMaterial = resultContent[0].goodsMaterial; goodsWeight = (resultContent[0].goodsWeight).toFixed(3); goodsTerminalNum = resultContent[0].goodsTerminalNum; goodsStatus = resultContent[0].goodsStatus; goodsOrigin = resultContent[0].goodsOrigin; goodsPackage = resultContent[0].goodsPackage; if (goodsOrigin == "鋼廠") { goodsOrigin = 1; if (goodsStatus == "0" || goodsStatus == "1"|| goodsStatus == "4") { pageOrigin = 1;//1.收貨管理-->鋼廠 } } else if (goodsOrigin == "貿易商") { goodsOrigin = 2; if (goodsStatus == "0" || goodsStatus == "1" || goodsStatus == "4") { pageOrigin = 2;//2.收貨管理-->貿易商 } } if (goodsStatus == "2" || goodsStatus == "3") { pageOrigin = 3;//3.發貨管理-->客戶自提 } else if (goodsStatus == "8") { pageOrigin = 6;//6.報表統計-->物資統計-->已完成物資 } /**** 建立物資圖示，並在地圖上顯示物資圖示，且滑鼠經過物資圖示時，顯示物資的詳細資訊 ***/ var steelMarker = new BMap.Marker(new BMap.Point(longitude[i],latitude[i])); //建立物資圖示 var steelContent = '<div><p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em"><br/>品名：'+goodsName+'<br/>規格：'+goodsType+'<br/>材質：'+goodsMaterial+'<br/>捆包號：'+goodsPackage+'<br/>重量(噸)：'+goodsWeight+'<br/>跟蹤器編號：'+goodsTerminalNum+ '<br/><a style="float:right;margin:10px" href="/ILTS/orderDetail/orderDetail.html?id='+goodsId+'&goodsStatus='+goodsStatus+'&pageOrigin='+pageOrigin+'&goodsOrigin='+goodsOrigin+'&goodsPackage='+goodsPackage+'">物資詳情</a></p></div>';//物資詳情彈出框 map.addOverlay(steelMarker); // 將物資圖示新增到地圖中 addMouseoverHandler(steelContent, steelMarker); //新增滑鼠滑過物資圖示時顯示物資詳情的事件 /**** 建立報警圖示，並在地圖上顯示報警圖示，且滑鼠經過報警圖示時，顯示報警的詳細資訊 ***/ if (alarm[i] == "1") { var alarmMarker = new BMap.Marker(new BMap.Point(longitude[i],latitude[i]),{icon:new BMap.Icon("/ILTS/images/alarm.png", new BMap.Size(20, 20))}); // 建立自定義報警圖示 var alarmContent = '<div><img style="float:right;margin:2px" id="alarmInfo" src="/ILTS/images/alarm.png" width="30" height="30"/><p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em"><br/>捆包號：'+goodsPackage+'<br/>報警型別：終端拆除報警<br/>報警時間：2017-05-05 09:32:35'+ '<br/><a style="float:right;margin:10px" href="/ILTS/alarmManage/undealedAlarm.html">報警詳情</a></p></div>'; map.addOverlay(alarmMarker); // 將報警圖示新增到地圖中 addMouseoverHandler2(alarmContent, alarmMarker); //新增滑鼠滑過報警圖示時顯示報警詳情的事件 } } } }); } } }, error:function(e){ // alert("獲取物資資訊失敗"); } }); /****** 滑鼠滑過標註時顯示詳情的事件 *******/ var opts = { width : 260, // 資訊視窗寬度 height: 200, // 資訊視窗高度 title : "<b>物資資訊</b>" , // 資訊視窗標題 enableMessage:true //設定允許資訊窗傳送短息 }; function addMouseoverHandler(content,marker){ /***** 滑鼠滑過事件 ******/ marker.addEventListener("mouseover",function(e){ openInfo(content,e); }); /***** 滑鼠移開事件 *****/ marker.addEventListener("mouseout",function(e){ closeInfo(content,e); }); } /**** 滑鼠滑過時開啟詳情彈出框 *****/ function openInfo(content,e){ var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content,opts); // 建立資訊視窗物件 map.openInfoWindow(infoWindow,point); //開啟資訊視窗 } /**** 滑鼠移開時關閉詳情彈出框 *****/ function closeInfo(content,e){ var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content,opts); // 建立資訊視窗物件 map.closeInfoWindow(infoWindow,point); //關閉資訊視窗 } /******* 滑鼠滑過標註時顯示報警詳情的事件 *******/ var alarmOpts = { width : 260, // 資訊視窗寬度 height: 160, // 資訊視窗高度 title : "<b>報警資訊</b>" , // 資訊視窗標題 enableMessage:true//設定允許資訊窗傳送短息 }; function addMouseoverHandler2(alarmContent, alarmMarker){ alarmMarker.addEventListener("mouseover",function(e){ openInfo2(alarmContent, e) }); } function openInfo2(alarmContent, e){ var p = e.target; var point2 = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow2 = new BMap.InfoWindow(alarmContent, alarmOpts); // 建立資訊視窗物件 map.openInfoWindow(infoWindow2, point2); //開啟資訊視窗 } </script>