mui-百度app應用一軌跡

1.配置manifest.json   填寫百度應用密鑰

2.頁面

<div id="allmap" class="allmap"></div>

3.js

這是可以軌跡展示

$.init();
        			var map = null;
				var playSpeed = 3000; //正常播放間隔是3000毫秒，可以根據自己需求設置播放速率
				var pointstart = []; //開始點
				var pointend = []; //結束點
				var stopoff = false; //暫停開關false暫停 true開始
				var points = []; //所有線軌跡點集合
				var numi = 0; //當前執行數目
				var timer = null; //定時器
				var onwpoint = null; //軌跡播放時的當前點
plusReady();

function plusReady(dataDto) {
					var view = plus.webview.currentWebview();
					map = new plus.maps.Map('allmap'); // 創建地圖實例
					Geolocation() //設置地圖
					getGuiJiData() //模擬服務器請求數據
					function getGuiJiData() {

						// var data = { //服務器請求來的數據格式
						// 	"rows": [{
						// 		"lng": "118.7901610013275",
						// 		"lat": "31.909016914533622"
						// 	}, {
						// 		"lng": "118.7901610013275",
						// 		"lat": "31.908016914533622"
						// 	}, {
						// 		"lng": "118.7901610013275",
						// 		"lat": "31.907016914533622"
						// 	}, {
						// 		"lng": "118.7901610013275",
						// 		"lat": "31.906016914533622"
						// 	}, {
						// 		"lng": "118.7901610013275",
						// 		"lat": "31.905016914533622"
						// 	}, {
						// 		"lng": "118.7901610013275",
						// 		"lat": "31.904016914533622"
						// 	}, {
						// 		"lng": "118.7901610013275",
						// 		"lat": "31.903016914533622"
						// 	}, {
						// 		"lng": "118.7901610013275",
						// 		"lat": "31.902016914533622"
						// 	}],
						// 	"result": "success"
						// }
						var stationLatMap = dataDto.stationLatMap;
						//設置配電房位置
						if (stationLatMap != null && stationLatMap != undefined) {
							for (var sub in stationLatMap) {
								//console.log(sub);
								//設置配電房marker
								var marker = new plus.maps.Marker(new plus.maps.Point(stationLatMap[sub].lng, stationLatMap[sub].lat));
								marker.setIcon("../images/index.png");
								marker.setLabel(sub);
								map.addOverlay(marker);
							}
						}
						var latLongs = dataDto.latLongs;
						if (latLongs != null) {


							guiJiTotal = latLongs.length;
							// console.log(latLongs.length);
							// console.log(JSON.stringify(stationLatMap));

							if (latLongs.length >= 2) {
								pointstart.push(new plus.maps.Point(latLongs[0].lng, latLongs[0].lat)); //把軌跡的第一個點設置爲起點
								//設置起點marker
								var marker = new plus.maps.Marker(new plus.maps.Point(latLongs[0].lng, latLongs[0].lat));
								marker.setIcon("../images/4-5.png");
								marker.setLabel("起點");
								map.addOverlay(marker);

								pointend.push(latLongs[latLongs.length - 1].lng, latLongs[latLongs.length - 1].lat); //把軌跡的最後一個點設置爲終點
								//設置終點marker
								var marker = new plus.maps.Marker(new plus.maps.Point(latLongs[latLongs.length - 1].lng, latLongs[latLongs
									.length - 1].lat));
								marker.setIcon("../images/4-6.png");
								marker.setLabel("終點");
								map.addOverlay(marker);
							}
							//把請求的點集合存到points集合裏
							for (var i = 0; i < latLongs.length; i++) {
								var longtitude = latLongs[i].lng;
								var latitude = latLongs[i].lat;
								points.push(new plus.maps.Point(longtitude, latitude));
							}
							//開始畫軌跡
							timer = setInterval(clock, playSpeed);
						}
					}

					//定時繪製軌跡
					function showLine() {
						if (stopoff == true) {
							return;
						}
						//兩點畫一個線
						var polylineObj = null;
						var point_line = [];
						point_line[0] = new plus.maps.Point(points[numi].longitude, points[numi].latitude);
						point_line[1] = new plus.maps.Point(points[numi + 1].longitude, points[numi + 1].latitude);
						map.setCenter((point_line[1])); //設置當前點爲地圖中心點
						polylineObj = new plus.maps.Polyline(point_line);
						polylineObj.setLineWidth(6); //設置線的粗細（Android和ios顯示粗細不一樣）
						polylineObj.setStrokeColor("#c3421a"); //設置線的顏色
						map.addOverlay(polylineObj);
						//設置當前運行點的marker
						var marker = new plus.maps.Marker(point_line[1]);
						marker.setIcon("../images/icon-yunwei.png");
						map.removeOverlay(onwpoint)
						onwpoint = marker;
						map.addOverlay(marker);
						numi++;
					}

					function clock() {

						showLine();
						if (numi >= guiJiTotal - 1) {
							stopoff = false;
							clearInterval(timer);
						}

					}
				}

				function Geolocation() {
					map.setZoom(18); //顯示層級
					map.showUserLocation(true);
					map.showZoomControls(true);
					map.getUserLocation(function(state, point) {
						if (0 == state) {
							if (point.latitude == '5e-324') {
								mui.toast("獲取位置信息失敗：請開啓定位服務，進入系統【設置】>【隱私】>【定位服務】中打開開關!");
							} else {
								map.setCenter(point);
								geoInf(point);

							}
						} else {
							mui.toast("獲取位置信息失敗：請開啓定位服務，進入系統【設置】>【隱私】>【定位服務】中打開開關!");
						}

					});
				}

				function geoInf(point) {
					plus.maps.Map.reverseGeocode(point, {}, function(event) {
						//獲取當前地理位置
						addressd = event.address; // 轉換後的地理位置
						var longit = point.longitude; //
						var latid = point.latitude; //緯度

					});

				}
				

注意點  主要是後端返回的數據格式，自己要清楚，我這裏的數據格式：

private List<LatLong> latLongs;

private Map<String,Object> stationLatMap;

@Data
public class LatLong {
//
//    private String begin;
//
//    private String end;
//
//    private String createDate;

    private Double lng;

    private Double lat;
}