Web GPS Template下載 - Web GPS Template原始碼下載

Web GPS Template

網站數據

1.0.0

下載

網路 GPS 模板

計劃創建混合應用程式？計劃在其中使用 GPS？那麼這個模板適合您！

要編輯的頁面：

marker.js -> 儲存地圖內的標記
nav-dialogs.js -> 保存抽屜範本（側邊欄）使用的方法
info.js -> 儲存使用者點擊或點擊地圖內的標記時所使用的事件的方法
navigation.js -> 控制應用程式使用的對話框
main.css -> 該頁面的佈局
templates.css -> index.html 和此頁面共享的一些設計選擇（背景顏色）

webinterface資料夾是由qgis的qgis2web外掛程式自動建立的。如果你建立一個新地圖並使用qgis2web插件，這個模板是非常相容的。雖然我在 qgis2web.js 中做了一些更改，以適應手動模式（手動設定 GPS 座標），所以在更改 Web 介面內容時請記住這一點。

該模板不會搜尋或比較座標位置，但您可以製作自己的模板。只需使用此 Javascript 方法即可取得您目前的位置。

值得注意的 JavaScript 方法和變數使用：

geolocation.getPosition() -> 此方法給予使用者目前的 GPS 位置
externalGeoLocate() -> 更新使用者目前的 GPS 位置
Manualcoords -> 您手動設定的 GPS 座標。僅當手動模式設定為 true 時才呼叫此變數

我認為 OpenLayers（使該模板成為可能的那個）有自己的比較座標的方法，您也可以使用它！

比較和搜尋座標的範例程式碼

  if ( typeof ( geolocation . getPosition ( ) ) === "undefined" && manualmode == false ) {
    return false ;
  }

  if ( manualmode ) {
    coords = manualcoords ;
  }
  else {
    coords = geolocation . getPosition ( ) ;
  }
  
  // Assume that we have a list of coordinates (objects that contain
  // x and y values). We compare each one of them using the classic
  // formula of [distance between two points]
  // (http://www.mathwarehouse.com/algebra/distance_formula/index.php) 
  // then push it to an array called selected
  for ( var i = 0 ; i < list . length ; i ++ ) {
    var icon = list [ i ] ;
    var dist = Math . sqrt ( Math . pow ( ( coords [ 0 ] - icon . x ) , 2 ) + Math . pow ( ( coords [ 1 ] - icon . y ) , 2 ) ) ;
    
    // If distance is close to the 2500m radius, then it is included
    if ( dist <= 2500 ) {
      selected . push ( icon ) ;
    }
  }