H5頁面引用百度地圖繪製車輛歷史軌跡
H5頁面引用百度地圖繪製車輛歷史軌跡
引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Go8TPnKDL44WFZbOATH4AsbA7qTwNosi"></script>
html代碼
<div id="allmap" style="width: 100%;height: 100vh"></div>
js代碼
//打開百度地圖
function openbMap(){
//模擬數據
var cars = {"car_5":[{"id":1,"order_id":651,"userNane": "王五","userPhoe": "18154679854","driver_id":5,"logistics_id":21,"lng":108.96903,"lat":34.307798,"position":"西安高新區高新4路","created_at":"2018-09-07 16:23:57","updated_at":"2018-09-07 16:23:57","with_driver":{"id":5,"logistics_comp_id":20,"userNane":"001","phone":"18000000010","plate_number":"","car_model":null,"status":0,"created_at":"2018-09-17 18:06:15","updated_at":"2018-09-17 18:06:15"}},{"id":2,"order_id":651,"userNane": "王五","userPhoe": "18154679854","driver_id":5,"logistics_id":21,"lng":108.977783,"lat":34.31214,"position":"西安高新區高新5路","created_at":"2018-09-07 16:24:34","updated_at":"2018-09-07 16:24:34","with_driver":{"id":5,"logistics_comp_id":20,"userNane":"001","phone":"18000000010","plate_number":"","car_model":null,"status":0,"created_at":"2018-09-17 18:06:15","updated_at":"2018-09-17 18:06:15"}}],"car_6":[{"id":3,"order_id":651,"userNane": "張三","userPhoe": "18154679854","driver_id":6,"logistics_id":20,"lng":108.977639,"lat":34.292697,"position":"西安市高新區\n","created_at":"2018-09-20 10:09:22","updated_at":"2018-09-20 10:09:22","with_driver":null},{"id":4,"order_id":651,"userNane": "張三","userPhoe": "18154679854","driver_id":6,"logistics_id":20,"lng":109.002217,"lat":34.296991,"position":"西安市高新區\n","created_at":"2018-09-20 10:13:42","updated_at":"2018-09-20 10:13:42","with_driver":null},{"id":5,"userNane": "張三","userPhoe": "18154679854","order_id":651,"driver_id":6,"logistics_id":20,"lng":109.037718,"lat":34.29556,"position":"西安市高新區\n","created_at":"2018-09-20 10:19:48","updated_at":"2018-09-20 10:19:48","with_driver":null}]};
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 建立Map實例
if(cars.length>0)
{
map.centerAndZoom(new BMap.Point(that.cars[0][0].lng, cars[0][0].lat), 13); // 初始化地圖,設置中心點座標和地圖級別
}
else
{
alert("未查詢到歷史軌跡數據");
map.centerAndZoom("西安",13);
}
map.enableScrollWheelZoom(false); //開啓鼠標滾輪縮放
//加載彈窗...
//地圖加載完成==>繪製歷史軌跡+起點+終點
map.addEventListener("tilesloaded",function(){
if(cars.length > 0)
{
for(var i = 0; i < cars.length; i++)
{
var pois = [];
if(cars[i].length > 0)
{
for(var j = 0; j < cars[i].length; j++)
{
pois.push(new BMap.Point(cars[i][j].lng, cars[i][j].lat));
}
}
var polyline =new BMap.Polyline(pois, {
enableEditing: false,//是否啓用線編輯，默認爲false
enableClicking: true,//是否響應點擊事件，默認爲true
strokeWeight:'3',//折線的寬度，以像素爲單位
strokeOpacity: 1,//折線的透明度，取值範圍0 - 1
strokeColor:"#fa5f02" //折線顏色
});
map.addOverlay(polyline); //增長折線
// 繪製起點文字信息
function drawStart(point, text){
this._point = point;
this._text = text;
}
drawStart.prototype = new BMap.Overlay();
drawStart.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#08B358";
div.style.border = "none";
div.style.color = "white";
div.style.height = "25px";
div.style.width = "25px";
div.style.borderRadius = "50%";
div.style.textAlign = "center";
div.style.padding = "2px";
div.style.lineHeight = "22px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "13px";
var span = this._span = document.createElement("span");
div.appendChild(span);
var arrow = this._arrow = document.createElement("div");
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "11px";
arrow.style.backgroundColor = "#08B358";
arrow.style.transform = "rotate(45deg)";
arrow.style.top = "17px";
arrow.style.borderRadius = "50px 50% 50% 50%";
arrow.style.left = "7px";
arrow.style.overflow = "hidden";
div.style.zIndex = "99";
div.appendChild(arrow);
span.appendChild(document.createTextNode(this._text));
map.getPanes().labelPane.appendChild(div);
addClickHandler(that.cars[i][0], that.cars[i][that.cars[i].length -1],div, that.cars[i][0]);
return div;
}
drawStart.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) - 6 + "px";
this._div.style.top = pixel.y - 29 + "px";
}
var startOpt = new drawStart(new BMap.Point(that.cars[i][0].lng,that.cars[i][0].lat), "起");
map.addOverlay(startOpt);
//繪製終點文字信息
function drawEnd(point, text){
this._point = point;
this._text = text;
}
drawEnd.prototype = new BMap.Overlay();
drawEnd.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#f00";
div.style.border = "none";
div.style.color = "white";
div.style.height = "25px";
div.style.width = "25px";
div.style.borderRadius = "50%";
div.style.textAlign = "center";
div.style.padding = "2px";
div.style.lineHeight = "22px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "13px";
div.style.zIndex = "100";
var span = this._span = document.createElement("span");
div.appendChild(span);
var arrow = this._arrow = document.createElement("div");
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "11px";
arrow.style.backgroundColor = "#f00";
arrow.style.transform = "rotate(45deg)";
arrow.style.top = "17px";
arrow.style.borderRadius = "50px 50% 50% 50%";
arrow.style.left = "7px";
arrow.style.overflow = "hidden";
div.style.zIndex = "99";
div.appendChild(arrow);
span.appendChild(document.createTextNode(this._text));
addClickHandler(that.cars[i][0], that.cars[i][that.cars[i].length -1],div, that.cars[i][that.cars[i].length -1]);
map.getPanes().labelPane.appendChild(div);
return div;
}
drawEnd.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) - 6 + "px";
this._div.style.top = pixel.y - 29 + "px";
}
if(that.cars[i].length > 1)
{
var endOpt = new drawEnd(new BMap.Point(that.cars[i][that.cars[i].length -1].lng,that.cars[i][that.cars[i].length -1].lat), "終");
map.addOverlay(endOpt);
}
var opts = {
width : 150, // 信息窗口寬度
height: "", // 信息窗口高度
title : "當前軌跡信息" , // 信息窗口標題
enableMessage:true,//設置容許信息窗發送短息
message:"親耐滴，晚上一塊兒吃個飯吧？戳下面的連接看下地址喔~"
};
function addClickHandler(start, end, marker, poit){
var content = "";
content = "司機姓名：" + end.userNane;
content += "<br\/>司機電話：" + end.userPhoe;
content += "<bt\/>車牌號：" + end.plateNumber;
content += "<br\/>起點：" + start.position;
content += "<br\/>終點：" + end.position;
marker.addEventListener("touchstart",function(e){
openInfo(content, poit)
});
}
function openInfo(content,poit){
// var p = e.target;
var point = new BMap.Point(poit.lng, poit.lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 建立信息窗口對象
map.openInfoWindow(infoWindow,point); //開啓信息窗口
}
}
}
//關閉加載彈窗...
});
}
相關文章
- 1. 百度地圖車輛運動軌跡
- 2. 百度地圖繪製軌跡
- 3. 百度地圖車輛運動軌跡(轉)
- 4. 百度鷹眼軌跡查詢歷史軌跡並顯示在地圖上
- 5. 百度地圖軌跡
- 6. 使用百度地圖JavaScript API GL繪製軌跡動畫
- 7. android-百度地圖：鷹眼軌跡的實時繪製
- 8. 地圖繪製行動軌跡
- 9. 高德地圖軌跡繪製
- 10. 百度地圖實時動態軌跡
- 更多相關文章...
- • RSS 歷史 - RSS 教程
- • R 繪圖 - 餅圖 - R 語言教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 百度地圖車輛運動軌跡
- 2. 百度地圖繪製軌跡
- 3. 百度地圖車輛運動軌跡(轉)
- 4. 百度鷹眼軌跡查詢歷史軌跡並顯示在地圖上
- 5. 百度地圖軌跡
- 6. 使用百度地圖JavaScript API GL繪製軌跡動畫
- 7. android-百度地圖：鷹眼軌跡的實時繪製
- 8. 地圖繪製行動軌跡
- 9. 高德地圖軌跡繪製
- 10. 百度地圖實時動態軌跡