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 ) ;
    }
  }