From c6be96f4ea541dbbcf4d87f3d7f9234124bf00d5 Mon Sep 17 00:00:00 2001
From: RaymonShare <raymonster@qq.com>
Date: Mon, 17 May 2021 10:24:02 +0800
Subject: [PATCH] =?UTF-8?q?Geolocation=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 HelloH5Plus/plus/geolocation.html | 126 +++++++++++++++++++++++-------
 1 file changed, 98 insertions(+), 28 deletions(-)

diff --git a/HelloH5Plus/plus/geolocation.html b/HelloH5Plus/plus/geolocation.html
index 8e46c3c..5d07307 100644
--- a/HelloH5Plus/plus/geolocation.html
+++ b/HelloH5Plus/plus/geolocation.html
@@ -8,7 +8,15 @@
 		<title>Hello H5+</title>
 		<script type="text/javascript" src="../js/common.js"></script>
 		<script type="text/javascript">
-var watchId;
+var isGeocode = true,//是否解析地址信息
+	geoZoom = 15,//地图默认放缩等级
+	geoTime = 5;//获取位置信息的间隔时间
+
+var watchId,
+	geoArr = [],
+	geoPoint = [],
+	geoArrLen = 0;
+
 function geoInf( position ) {
 	var str = "";
 	var codns = position.coords;//获取地理坐标信息；
@@ -27,6 +35,8 @@ function geoInf( position ) {
 	
 	var timeflag = position.timestamp;//获取到地理位置信息的时间戳；一个毫秒数；
 	str += "时间戳："+timeflag+"\n";
+	
+	str += "时间："+dateToStr(new Date(timeflag))+"\n";
 		
 	var alt = codns.altitude;//获取到当前位置的海拔信息；
 	str += "海拔："+alt+"\n";
@@ -47,18 +57,24 @@ function getPos() {
 	outSet( "获取位置信息:" );
 	plus.geolocation.getCurrentPosition( geoInf, function ( e ) {
 		outSet( "获取位置信息失败："+e.message );
-	}, {geocode:false} );
+	}, {geocode:isGeocode} );
 }
 function watchPos() {
 	if ( watchId ) {
 		return;
 	}
 	watchId = plus.geolocation.watchPosition( function ( p ) {
-		outSet( "监听位置变化信息:" );
+		outSet( "监听位置变化信息, " + geoTime + "秒一次:" );
 		geoInf( p );
+		
+		var geoMyPoint = geoHandle(p);
+		geoArr.push(geoMyPoint);//原始点数据
+		geoPoint.push(new plus.maps.Point(geoMyPoint.lon, geoMyPoint.lat));//点坐标对象数据
+		
+		drawHandle();
 	}, function ( e ) {
 		outSet( "监听位置变化信息失败："+e.message );
-	}, {maximumAge:2000, geocode:false} );
+	}, {maximumAge:geoTime * 1000, geocode:isGeocode} );
 }
 function clearWatch() {
 	if ( watchId ) {
@@ -67,42 +83,96 @@ function clearWatch() {
 		watchId = null;
 	}
 }
-// 通过定位模块获取位置信息
-function getGeocode(){
-	outSet( "获取定位模块信息:" );
-	plus.geolocation.getCurrentPosition( geoInf, function ( e ) {
-		outSet( "获取定位模块信息失败："+e.message );
-	},{geocode:true});
+function resetMap(){
+	geoArr.splice(0, geoArrLen);
+	geoPoint.splice(0, geoArrLen);
+	
+	map.centerAndZoom(pcenter, geoZoom);
+	map.reset();
 }
-function watchGeocode() {
-	if ( watchId ) {
-		return;
+function drawHandle() {
+	map.reset();
+	createMarker();
+	map.centerAndZoom(geoPoint[geoPoint.length - 1], geoZoom);
+}
+
+
+//处理轨迹点
+function geoHandle(pos) {
+	geoArrLen = geoArrLen + 1;
+	return {
+		index: geoArrLen,//序号, 从1开始
+		lon: pos.coords.longitude,//经度
+		lat: pos.coords.latitude,//纬度
+		accuracy: pos.coords.accuracy,//精确度(米),
+		timestamp: pos.timestamp,//时间戳
+		date: dateToStr(new Date(pos.timestamp))//日期
+	};
+}
+
+function createMarker() {
+	for (var i = 0; i < geoArrLen; i++) {
+		var pos = geoArr[i],
+			marker = new plus.maps.Marker(geoPoint[i]);
+		
+		marker.setIcon("/logo.png");
+		marker.setLabel('==' + pos.index + '==');
+		
+		var bubble = new plus.maps.Bubble(pos.date);
+		marker.setBubble(bubble);
+		
+		map.addOverlay(marker);
 	}
-	watchId = plus.geolocation.watchPosition( function ( p ) {
-		outSet( "监听定位模块信息:" );
-		geoInf( p );
-	}, function ( e ) {
-		outSet( "监听定位模块失败："+e.message );
-	}, {maximumAge:2000, geocode:true} );
 }
+
+var ws=null,wo=null;
+var em=null,map=null,pcenter=null;
+// H5 plus事件处理
+function plusReady(){
+	if(!em||ws){return};
+	// 获取窗口对象
+	ws=plus.webview.currentWebview();
+	wo=ws.opener();
+	//高德地图坐标为(116.3974357341,39.9085574220), 百度地图坐标为(116.3975,39.9074)
+	pcenter = new plus.maps.Point(113.313353, 23.397994);
+	setTimeout(function(){
+		map=new plus.maps.Map("map");
+		map.centerAndZoom(pcenter, geoZoom);
+	},300);
+}
+if(window.plus){
+	plusReady();
+}else{
+	document.addEventListener("plusready",plusReady,false);
+}
+// DOMContentloaded : 初始的 HTML 文档被完全加载和解析完成
+document.addEventListener("DOMContentLoaded",function(){
+	em=document.getElementById("map");
+	window.plus&&plusReady();
+},false);
 		</script>
 		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
+		<style>
+#map {
+	width: 100%;
+	height: 300px;
+	line-height: 450px;
+	text-align: center;
+	background: #FFFFFF;
+}
+		</style>
 	</head>
 	<body>
-		<br/>
 		<ul class="dlist">
-			<li class="ditem" onclick="getPos()">获取设备位置信息</li>
+			<!--<li class="ditem" onclick="getPos()">获取设备位置信息</li>-->
 			<li class="ditem" onclick="watchPos()">监听设备位置信息</li>
+			<li class="ditem" onclick="resetMap()">清空地图</li>
 			<li class="ditem" onclick="clearWatch()">停止监听</li>
 		</ul>
-		
-		<br/>
-		<div class="button" onclick="getGeocode()">获取定位模块信息</div>
-		<div class="button" onclick="watchGeocode()">监听定位模块信息</div>
-		
-		<p class="des">
+		<div id="map" class="map">地图加载中...</div>
+		<!--<p class="des">
 			Android平台推荐配置高德或百度定位，避免在部分设备（如三星、HTC等）可能无法获取位置信息的问题。
-		</p>
+		</p>-->
 		<div id="output">
 Geolocation可获取设备位置信息，包括经度、纬度、高度等信息。
 		</div>
-- 
Gitee