高德地圖實現公交路線-新增標記-軌跡回放-中心點-圖層

阿新 • • 發佈：2019-01-12

效果圖

軌跡回放

JSP

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>XXX</title>	

    <script src="http://webapi.amap.com/maps?v=1.3&key=63dd2746f7ca2b0bd5242b297e22d50f&callback=init"></script>
     <!-- UI元件庫 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js"></script>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
   
    
	<script>
	
		//初始化地圖
	    function init(){
	    	var centerLatitude = "105.729085";
	        var centerLongitude = "35.963913";
	        var map = new AMap.Map('container', {
	            center: [centerLatitude,centerLongitude],
	            zoom: 16
	        });
	        
	        //公交場站標註資訊
	        var markers = [];
	        <c:forEach items="${busHubList}" var="busHub">
	        	var marker = new Object();
	        	marker.position=["${busHub.x}", "${busHub.y}"];
	        	marker.content="${busHub.Cotent}";
	        	markers.push(marker);
	        </c:forEach>  
	        
	        //公交車標註資訊
	        var buses = [];
	        <c:forEach items="${busList}" var="bus">
	        	var marker = new Object();
	        	marker.number = "${bus.number}";
	        	marker.name = "${bus.name}";
	        	marker.company = "${bus.company}";
	        	marker.line = "${bus.line}";
	        	marker.position=["${bus.x}", "${bus.y}"];
	        	buses.push(marker);
	        </c:forEach>  
	        
	        
	        AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {


	            //縮放控制元件，顯示Zoom值
	            map.addControl(new BasicControl.Zoom({
	                position: 'lb',
	                showZoomNum: true
	            }));

	            //圖層切換控制元件
	            map.addControl(new BasicControl.LayerSwitcher({
	                position: 'rt'
	            }));
	        });
	        //中心點
	        AMap.event.addDomListener(document.getElementById('pantoBtn'), 'click', function() {
	            map.panTo([105.729085,35.963913]);
	        });
	        
	      	
	         //公交路線
	          var lineArrs = [];
	         <c:forEach items="${busRoutesList}" var="busRoutes">
	        	 var lineArr = new Object();
	        	 var position=[];
	        	 var tx = "${busRoutes.x}".split(",");
	        	 var ty = "${busRoutes.y}".split(",");
	        	 for (var i=0;i<"${busRoutes.x}".split(",").length - 1;i++)
	        	    {
	        	    	position.push([tx[i],ty[i]]);
	        	    }
	        	 lineArr.name = "${busRoutes.name}";
	        	 lineArr.position = position;
	        	 lineArrs.push(lineArr);
	         </c:forEach> 
	         //建立公交路線
	         var i=00200;
	           lineArrs.forEach(function(line) {
	        	  //alert(line.position)
	        	  	//折線
	        	  	
	        	  var polyline = new AMap.Polyline({
		              strokeColor: "#"+i, //線顏色
		              strokeOpacity: 1,       //線透明度
		              strokeWeight: 5,        //線寬
		              strokeStyle: "solid",   //線樣式
		              strokeDasharray: [10, 5] //補充線樣式
		          });
	        	  i+=50;
		          polyline.setMap(map);
		          polyline.setPath(line.position);
	          });  
	        
	        
	        //新增標記點
	       AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {
	           
	    	  
		        
	    	   //在地圖上為每公交場站新增標註資訊
		        markers.forEach(function(marker) {
		             AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
		            	var marker1 = new SimpleMarker({
		            	//設定節點屬性
		                 iconLabel: {
		                     //普通文字
		                     innerHTML: '公交場站',
		                     //設定樣式
		                     style: {
		                         color: '#fff',
		                         fontSize: '77%',
		                         marginTop: '2px'
		                     }
		                 },
		                 //直接設定html(需要以"<"開頭並且以">"結尾)
		                 iconStyle: '<div style="background:red;width:30px;height:30px;"></div>',

		                 //設定基點偏移
		                 //offset: new AMap.Pixel(-10, -60),

		                 map: map,
		                 showPositionPoint: true,
		                 position: marker.position
		             });
		             var infoWindow = new SimpleInfoWindow({
		        		   
		                 infoTitle: '<strong>'+marker.content+'</strong>',
      					 infoBody: '<p class="my-desc"><strong>'+marker.content+'</strong> <br/> '+marker.content+'</p>',
		                //基點指向marker的頭部位置
		                offset: new AMap.Pixel(0, -31)
		            });

		            function openInfoWin() {
		                infoWindow.open(map, marker1.getPosition());
		            }

		            //marker 點選時開啟
		            AMap.event.addListener(marker1, 'click', function() {
		                openInfoWin();
		            });
	        	}); 
		     }); 
		             
		     buses.forEach(function(marker) {  
		        var marker1 = new AMap.Marker({
	                 map: map,
	                 position: marker.position,
	                 zIndex: 100,
	                 
       	  }); 
            
       	  var infoWindow = new SimpleInfoWindow({
       		  		 
	                 infoTitle: '<strong>公交車資訊</strong>',
 					 infoBody: '<p class="my-desc"><strong>車牌號：'+marker.number+'</strong> <br/><br/> <strong>運營司機：'+marker.name+'</strong> <br/><br/> <strong>歸屬公司：'+marker.company+'</strong> <br/><br/> <strong>運營線路：'+marker.line+'</strong> <br/><br/> <strong>當前位置：'+marker.position+'</strong> <br/><br/> <a href="#">視訊檢視</a>    <a href="${ctx}/tosmp/busTrackPlayback">軌跡回放</a> </p>',
	                //基點指向marker的頭部位置
	                offset: new AMap.Pixel(0, -31)
	            });
				
	            function openInfoWin() {
	                infoWindow.open(map, marker1.getPosition());
	            }

	            //marker 點選時開啟
	            AMap.event.addListener(marker1, 'click', function() {
	                openInfoWin();
	            });
	    	   
		  	  }); 
	       });  
	        
	    }
	    
	</script>
    
    <style>
	    html,
	    body,
	    #container {
	        width: 100%;
	        height: 100%;
	        margin: 0px;
	        font-size: 13px;
	    }
	    
	    .info {
            border: solid 1px silver;
        }
        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }
        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }
        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }
        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }
        div.info-middle {
            font-size: 12px;
            padding: 6px;
            line-height: 20px;
        }
        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }
        div.info-bottom img {
            position: relative;
            z-index: 104;
        }
        span {
            margin-left: 5px;
            font-size: 11px;
        }
        .info-middle img {
            float: left;
            margin-right: 6px;
        }
    </style>

</head>
<body>
	<div id="container" class="container"></div>
<div class="button-group">
    <input id="pantoBtn" type="button" class="button" value="中心點"/>
</div>
</body>
</html>

軌跡回放部分

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>軌跡回放</title>	

    <script src="http://webapi.amap.com/maps?v=1.3&key=63dd2746f7ca2b0bd5242b297e22d50f&callback=init"></script>
     <!-- UI元件庫 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js"></script>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
   
</head>
<body>

<div id="container"></div>
<div class="button-group">
    <input type="button" class="button" value="開始動畫" id="start"/>
     <input type="button" class="button" value="暫停動畫" id="pause"/>
      <input type="button" class="button" value="繼續動畫" id="resume"/>
    <input type="button" class="button" value="停止動畫" id="stop"/>
    <a href="xx/xx/loadBusMapInfo" class="button" >返回</a>
   

</div>

	<script>
    var marker, lineArr = [];
  
	var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [105.729085,35.963913],
        zoom: 16
    });
    marker = new AMap.Marker({
        map: map,
        position: ["${track.x}", "${track.y}"],
        icon: "http://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true
    });
    var tx = "${track.tx}".split(",");
    var ty = "${track.ty}".split(",");
   
    for (var i=0;i<"${track.tx}".split(",").length - 1;i++)
    {
    	lineArr.push([tx[i],ty[i]]);
    }

    // 繪製軌跡
    var polyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        strokeColor: "#00A",  //線顏色
        // strokeOpacity: 1,     //線透明度
        strokeWeight: 3,      //線寬
        // strokeStyle: "solid"  //線樣式
    });
    var passedPolyline = new AMap.Polyline({
        map: map,
        // path: lineArr,
        strokeColor: "#F00",  //線顏色
        // strokeOpacity: 1,     //線透明度
        strokeWeight: 3,      //線寬
        // strokeStyle: "solid"  //線樣式
    });


    marker.on('moving',function(e){
        passedPolyline.setPath(e.passedPath);
    })
    map.setFitView();

    AMap.event.addDomListener(document.getElementById('start'), 'click', function() {
        marker.moveAlong(lineArr, 500);
    }, false);
     AMap.event.addDomListener(document.getElementById('pause'), 'click', function() {
        marker.pauseMove();
       }, false);
      AMap.event.addDomListener(document.getElementById('resume'), 'click', function() {
        marker.resumeMove();
    }, false);
    AMap.event.addDomListener(document.getElementById('stop'), 'click', function() {
        marker.stopMove();
    }, false);

</script>
</body>
</html>

後臺

@Controller
@RequestMapping(value = "xxx")
public class BusMonitorController extends BaseController {

	@Autowired
	private BusMonitorService busMonitorService;


	/**
	 * 地圖初始化
	 * 
	 * @param model
	 * @return
	 */
	@RequestMapping(value = "loadBusMapInfo")
	public String loadBusMapInfo(Model model) {
		// 公交場站
		List<Map<String, String>> busHubList = busMonitorService.findBusHubList();
		model.addAttribute("busHubList", busHubList);

		// 公交車
		List<Map<String, String>> busList = busMonitorService.findBusList();
		model.addAttribute("busList", busList);

		// 公交線路
		 List<Map<String,String>> busRoutesList =
		 busMonitorService.findBusRoutes();
		 model.addAttribute("busRoutesList", busRoutesList);

		return "busMap";
	}

	/**
	 * 軌跡回放
	 * 
	 * @param model
	 * @return
	 */
	@RequestMapping(value = "busTrackPlayback")
	public String busTrackPlayback(Model model) {
		Map<String, String> track = busMonitorService.findBusTrack();
		model.addAttribute("track", track);
		return "busTrackPlayback";
	}

	

}

@Service
@Transactional(readOnly = true)
public class BusMonitorService {

	@Autowired
	public WarningRecordService warningRecordService;

	// 所有公交場站
	public List<Map<String, String>> findBusHubList() {

		ArrayList<Map<String, String>> list = new ArrayList<>();

		Map<String, String> busHub = new HashMap<String, String>();
		busHub.put("Cotent", "XXX公交場站資訊");
		busHub.put("x", "105.734014");
		busHub.put("y", "35.96336");

		Map<String, String> busHub1 = new HashMap<String, String>();
		busHub1.put("Cotent", "YYY公交場站資訊");
		busHub1.put("x", "105.725431");
		busHub1.put("y", "35.964576");

		list.add(busHub);
		list.add(busHub1);

		return list;
	}

	// 所有公交車
	public List<Map<String, String>> findBusList() {

		ArrayList<Map<String, String>> list = new ArrayList<>();

		Map<String, String> bus = new HashMap<String, String>();
		bus.put("number", "YY991");
		bus.put("name", "李雷");
		bus.put("company", "一家公交公司");
		bus.put("line", "一號線");
		bus.put("x", "105.730383");
		bus.put("y", "35.963638");

		list.add(bus);

		return list;
	}

	// 軌跡回放
	public Map<String, String> findBusTrack() {

		Map<String, String> track = new HashMap<String, String>();
		track.put("number", "YY991");
		track.put("x", "105.730383");
		track.put("y", "35.963638");
		track.put("tx", "105.723222,105.725947,105.727293,105.727132,105.726467,105.727572,105.729471,105.730383");
		track.put("ty", "35.968935,35.968774,35.968714,35.967858,35.965062,35.963855,35.963673,35.963638");

		return track;
	}

	

	// 公交線路

	public List<Map<String, String>> findBusRoutes() {

		ArrayList<Map<String, String>> list = new ArrayList<>();

		Map<String, String> busRoutes = new HashMap<String, String>();
		busRoutes.put("name", "1號線");
		busRoutes.put("x",
				"105.733892,105.731338,105.731338,105.727132,105.726725,105.724536");
		busRoutes.put("y",
				"35.966109,35.966143,35.966143,35.966456,35.966595,35.967463");
		list.add(busRoutes);

		Map<String, String> busRoutes1 = new HashMap<String, String>();
		busRoutes1.put("name", "二號線");
		busRoutes1.put("x",
				"105.733259,105.732143,105.730383,105.729471,105.727572,105.726467,105.727132,105.727293,105.725947,105.723222");
		busRoutes1.put("y",
				"35.963508,35.963586,35.963638,35.963673,35.963855,35.965062,35.967858,35.968714,35.968774,35.968935");
		list.add(busRoutes1);

		return list;
	}

}

高德地圖實現公交路線-新增標記-軌跡回放-中心點-圖層

效果圖軌跡回放 JSP <%@ page contentType="text/html;charset=UTF-8"%> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> &l

基於高德地圖實現的公交線路查詢功能

resource 返回 end 裏的成功文檔地圖插件 osi con 高德地圖支持公交線程查詢功能。線上示例; 線上示例說明接口返回的數據結構： path和via_stops字段詳情： ... path: [ { Q: 39.97741,

Unity與Android交互-Unity接入高德地圖實現定位以及搜索周邊的功能（使用Android Studio）詳細操作

nac mcc 以及分享 pack create lis red 效果剛進公司給安排的任務就是Unity接入高德地圖，算是踩了不少坑總算做出來了，抽點時間寫個博客記錄一下廢話不多說先上效果圖獲取定位並根據手機朝向顯示周邊信息使用的Unity

Android Studio之高德地圖實現定位和3D地圖顯示

tor uil track width 博客 5.0 eight ext wid 在應用開發中，地圖開發是常常須要使用的“組件”，國內比較出名的是就是百度地圖和高德地

採用高德地圖實現打車功能程式碼

1：移動視角要用：aMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 50)); aMap.animateCamera(CameraUpdateFactory.newLatLngBounds(bounds,

（六）高德地圖之駕車路線規劃

在專案中用到地圖的地方往往會有導航功能，那麼這一節將介紹一下使用高德地圖來實現駕車路線規劃的功能。首先來兩張示例圖供參考： &nbs

【android學習筆記】activity間的通訊案例之高德地圖實現天氣查詢

【概述】app實現天氣查詢是再正常不過的功能了，又因為往往不止一個activity去獲取資料，那就想到封裝一個類，需要時去呼叫獲取即可。【注】因為看文件還有點懵，故將自己抓腦寫的程式碼記錄下，以便查詢【思路】activity傳送請求--獲取地址--根據地址獲取天氣

高德地圖實現

首先匯入依賴 implementation 'com.amap.api:location:4.4.0' 還有許可權  <uses-permission android:name="android.permission.ACCESS_

基於高德地圖實現移動網際網路地圖定位自動檢索系統

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>移動網際網路地圖定位自動檢索系統-熊盼</title> <

基於高德地圖實現完全自定義Marker

做地圖社交類APP開發的都知道,一般情況下,為了整體的美觀和使用者體驗度,我們需要定製化Marker的樣式。本文中實現的方式都是基於高德地圖的,百度地圖也類似,大家可以照葫蘆畫瓢,廢話不多說,先來看看最終效果: 實現思路: 先來看看高德官方提供的設

Android高德地圖實現定位周邊熱點 POI搜尋 BottomSheetBehavior 動態獲取許可權demo

首先我們先看下效果 demo中包含了兩種不同風格的地圖定位效果展示，一種仿IOS的蘋果地圖實現的介面地圖抽屜欄展示通過手勢滑動可以實現底部欄的BottomSheetBehavior 可以通過上下拖拽隱藏或者全屏效果專案地址：https://github.com/xi

Android高德地圖實現後臺定位

在專案當中，很多時候都會用到地圖，百度地圖是我們經常用的，下面我給大家用高德地圖實現後臺定位，這樣可以實現軌跡的路線： public class LocationService extends Service { //宣告mLocationOption物件，定位引

iOS獲取高德地圖實現持續定位功能

首先，根據高德地圖開發平臺在Xcode裡面配置相應的環境自動部署用cocoapods，請按照http://lbs.amap.com/api/ios-location-sdk/guide/create-project/cocoapods 手動部署請按照http://lbs.

[WebGIS] Demo3-使用高德地圖Web服務|路線規劃

高德地圖路徑規劃服務使用申請高德地圖Web服務的Key 按申請的引數拼接URL 使用JS的AJAX非同步請求HTTP服務獲取引數使用例子 JS框架：jQuery（操作DOM，非同步傳送請求） ArcGIS API for javascript

高德地圖API JS實現獲取座標和回顯點標記

1.搜尋+選擇+獲取經緯度和詳細地址 2.回顯資料並點標記 3.實現第一步：引入資原始檔  <script src="//webapi.amap.com/maps?v=1.3&key=在官網申請一個key

Android開發知識（十）快速接入高德地圖SDK（地圖+定位+標記+路線規劃+搜尋）

目錄申請接入流程高德地圖的申請接入流程 1、首先到 [ 高德地圖API官網] 申請註冊帳號 2、進入控制檯，點選應用管理，我們建立一個新的應用： 3、為剛才建立的應用新增key：隨便輸入一個key的名稱，這裡我們只討論Androi

高德地圖新增Marker點標記

示例程式碼部分： <!doctype html> <html> <head> <meta charset="utf-8"> <

高德地圖中實現實時定位、駕車路線規劃，點間距

/** * 實現地圖的載入 * @author 木蘭綴露 *對於標記點過多的顯示問題，將定位點的經緯度傳至伺服器的方法內增加減少經緯度，然後好資料庫標記點進行經緯度比對，如果有則載入到前臺，如果沒則擴大載入範圍 */ public class MapActi

高德地圖Android版SDK的應用(定位，新增自定義標記點)

需要先下載高德地圖的 Android SDK和 Android 定位SDK : http://code.autonavi.com/index package com.fproject.DXCBuy; import com.amap.api.location.AMap

一頁程式碼實現高德地圖顯示自己定位，以及Marker標記點顯示（文末有福利哦）

import android.Manifest; import android.content.pm.PackageManager; import android.location.Location; import android.os.Bundle; import andr

高德地圖實現公交路線-新增標記-軌跡回放-中心點-圖層

相關推薦