/* 定義全局變量 */ var ulm_Int = null;//保存手機定位信息輪詢setInterval的id var isFirstQuery = null;//定義一個變量保存是否是第一次查詢 var ulm_Layer = null;//手機定位信息圖層變量 var ulm_queryResult = null;//保存手機定位信息查詢結果的變量 var firstQueryPrompt = null;//保存第一次查詢提示框對象的變量 var utd_pointDict = {};//保存地圖上存在的最新的更新數據的點的用戶名稱及graphics下標 key: username value: graphics下標/* 啟動獲取手機的定位信息的定時輪詢 */ function startUlMsgPolling(eventid){//判斷手機定位信息查詢按鈕的文本值var bValue = $("#ulm_btn").html()=="開啟手機定位信息查詢功能";//清除之前的圖層if(map.getLayer("ulm_layer")){map.removeLayer(map.getLayer("ulm_layer"));}if(bValue){//1: 代表第一次查詢 0: 代表不是第一次查詢isFirstQuery = true;//彈出正在查詢的提示框firstQueryPrompt = $.messager.alert({title: "提示", msg: "正在查詢中...", icon: "ok"}); //初始查詢 queryUserLocationMsg(eventid);//設置定時器，暫時設成1分鐘查詢一次ulm_Int = setInterval(queryUserLocationMsg(eventid), 60*1000);//改變手機定位信息查詢按鈕的文本值$("#ulm_btn").html("關閉手機定位信息查詢功能");}else{//結束手機信息輪詢 endUlMsgPolling();//改變手機定位信息查詢按鈕的文本值$("#ulm_btn").html("開啟手機定位信息查詢功能");} } /* 查詢手機定位信息 */ function queryUserLocationMsg(eventid){//定義錯誤提示窗口變量var errorPrompt = null;//Ajax進行異步請求 查詢數據庫var url = "queryUserLocationMsg/";//請求地址var params = {"eventid": eventid, "isFirstQuery": isFirstQuery};//請求參數 $.ajax({url: url,type: "post",timeout: 30*1000,data: params,dataType: "json",success: function(res){if(isFirstQuery === true && firstQueryPrompt !== null){//關閉正在查詢的提示框firstQueryPrompt.window('close'); }//對結果進行判斷var bLen = res.length > 0;if(bLen){ulm_queryResult = res;showLocationPoint();}else if(!bLen && isFirstQuery){$.messager.confirm({title: "提示",msg: "抱歉，沒有可供顯示的定位信息。繼續等待可能會有新的定位數據返回... 選擇“確認”按鈕繼續監控定位信息；選擇“取消”按鈕結束查詢。",fn: function(r){if(!r){//結束手機信息輪詢 endUlMsgPolling();//改變手機定位信息查詢按鈕的文本值$("#ulm_btn").html("開啟手機定位信息查詢功能");}}});}},error: function(e){if(isFirstQuery === true && firstQueryPrompt !== null){//關閉正在查詢的提示框firstQueryPrompt.window('close'); }//關閉前一個錯誤提示框if(errorPrompt !== null){errorPrompt.window("close");}//發生錯誤，中斷手機定位信息輪詢 endUlMsgPolling();//改變手機定位信息查詢按鈕的文本值$("#ulm_btn").html("開啟手機定位信息查詢功能");errorPrompt = $.messager.alert({title: "提示", msg: "請求過程中發生錯誤，已中斷查詢...\n", icon: "error"});isFirstQuery = false;}});}/* 在地圖上顯示點的函數 */ function showLocationPoint(){//判斷是否是第一次查詢if(isFirstQuery){//新建圖層ulm_layer = new esri.layers.GraphicsLayer({id: "ulm_layer"});//添加圖層 map.addLayer(ulm_layer);//進行循環繪制for(var i=0; i<ulm_queryresult.length; i++){="" 獲取地圖的graphics="" var="" ulm_graphics="map.getLayer("ulm_layer").graphics;" 將要繪制的點的顏色及邊框顏色="" pcolor="null;" bcolor="null;" 找到最新的位置信息點="" if(i="=" ulm_queryresult.length="" -="" 1="" ||="" ulm_queryresult[i].username="" !="ulm_queryResult[i+1].username){" 首先將最新點加到utd_pointdict當中去="" if(!ulm_graphics){="" utd_pointdict[ulm_queryresult[i].username]="i;" }else{="" }="" 給點的顏色及邊框顏色變量賦值="" 255,="" 0];="" 0,="" 新建一個graphic="" lographic="drawPointAndTemplate(ulm_queryResult[i]," pcolor,="" bcolor)="" 將graphic添加到相應的圖層="" ulm_layer.add(lographic);="" 滿足判斷條件則繪制軌跡線="" &&="" ulm_queryresult[i+1].username){="" 獲取直線兩個端點的經緯度="" cur_x="parseFloat(ulm_queryResult[i].longitude)," cur_y="parseFloat(ulm_queryResult[i].latitude);" next_x="parseFloat(ulm_queryResult[i+1].longitude)," next_y="parseFloat(ulm_queryResult[i+1].latitude);" 定義直線的顏色="" color="JSON.parse(ulm_queryResult[i].color);" track_graphic="drawPolyLine(cur_x," cur_y,="" next_x,="" next_y,="" color);="" ulm_layer.add(track_graphic);="" 將判斷是否是第一次查詢的標志改成false="" isfirstquery="false;" console.log("this="" is="" pollingrun!");="" for(var="" i="0;" i<ulm_queryresult.length;="" 判斷地圖上是否已經存在該用戶的位置信息軌跡="" if(!!utd_pointdict[ulm_queryresult[i].username]){="" 包含ulm_queryresult[i]="" key="" （意為地圖上已存在該用戶的點）="" 修改地圖上存在的最后畫的點的邊框顏色="" gra_index="utd_pointDict[ulm_queryResult[i].username];" 定義一個新的顏色的邊框="" newsymbol="new" esri.symbol.simplelinesymbol(="" esri.symbol.simplelinesymbol.style_solid,="" 邊框為實線="" new="" esri.color([255,="" 0]),="" 邊框的顏色為紅色="" 實線的寬度="" );="" 點的邊框樣式="" ulm_graphics[gra_index].symbol.setoutline(newsymbol);="" 重繪graphic="" ulm_graphics[gra_index].draw();="" 改變最后一個點為當前點，因為先畫的軌跡線，占一個index="" +="" 1;="" 獲取繪制直線的起始端點="" ulm_attr="ulm_graphics[gra_index].attributes;" 獲取直線起始端點的經緯度="" 獲取直線終止端點的經緯度="" 不包含ulm_queryresult[i]="" 改變最后一個點為當前點="" *="" 繪制點和彈窗的函數="" function="" drawpointandtemplate(positionmsg,="" bcolor){="" 防止出現字符串，將經緯度先解析成浮點類型="" x="parseFloat(positionMsg.longitude)," y="parseFloat(positionMsg.latitude);" 1.創建新的geometry="" newpoint="new" esri.geometry.point(x,="" y,="" map.spatialreference);="" 2.創建新的symbol="" esri.symbols.simplemarkersymbol(="" esri.symbols.simplemarkersymbol.style_circle,="" 繪制的點的形狀，選擇圓型="" 20,="" 繪制的點的大小="" 繪制的點的邊框為實線="" esri.color(bcolor),="" 繪制的點的邊框顏色="" 3="" 繪制的點的邊框實線的寬度，即線的粗細="" ),="" 繪制的點的邊框="" esri.color(pcolor)="" 繪制的點的顏色="" 3.定義彈窗的屬性="" tattributes="{" "username":="" positionmsg.username,="" "email":="" positionmsg.email,="" "position":="" positionmsg.position,="" "telephone":="" positionmsg.telephone,="" "longitude":="" positionmsg.longitude,="" "latitude":="" positionmsg.latitude,="" "updatetime":="" positionmsg.updatetime="" };="" 4.創建新的template="" newtemplate="new" esri.infotemplate(="" "用戶定位信息",="" 彈窗標題="" "用戶名稱：${username}<br="">" +"郵箱：${eamil}<br>" +"位置：${position}<br>" +"手機：${telephone}<br>" +"經度：${longitude}<br>" + "緯度：${latitude}<br>" +"更新時間：${updatetime}"//彈窗內容 );//5.創建新的graphicvar newGraphic = new esri.graphic(newPoint, newSymbol, tAttributes, newTemplate);//返回graphic對象return newGraphic;} /* 繪制直線的函數 */ function drawPolyLine(cur_x, cur_y, next_x, next_y, color){//1.創建新的geometryvar newPlJson = {"paths":[[[cur_x,cur_y], [next_x,next_y]]],"spatialReference": map.spatialReference};var newPolyLine = new esri.geometry.Polyline(newPlJson);//2.創建新的symbolvar newSymbol = new esri.symbols.SimpleLineSymbol(esri.symbols.SimpleLineSymbol.STYLE_DASH,//繪制的直線的樣式，選擇虛線new esri.Color(color),//繪制的直線的顏色3//繪制的直線的寬度，即線的粗細 );//3.創建新的graphicvar newGraphic = new esri.graphic(newPolyLine, newSymbol);//返回graphic對象return newGraphic; } /* 清除定時器 ，關閉輪詢 */ function endUlMsgPolling(){ // console.log(ulm_Int); clearInterval(ulm_Int); }</ulm_queryresult.length;>

效果圖：

轉載于:https://www.cnblogs.com/leebokeyuan/p/8351221.html

總結

以上是生活随笔為你收集整理的Arcgis API for JavaScript在地图上实现手机定位信息的追踪显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。