Web GPS Template

웹-GPS-템플릿

하이브리드 앱을 만들 계획이신가요? GPS를 사용할 계획이신가요? 그렇다면 이 템플릿이 당신을 위한 것입니다!

편집할 페이지:

• marker.js -> 지도 내부에 마커를 보관합니다.
• nav-dialogs.js -> 서랍 템플릿(사이드 바)에서 사용되는 메소드를 보유합니다.
• info.js -> 사용자가 지도 내부의 마커를 클릭하거나 탭할 때 이벤트가 사용되는 메소드를 보유합니다.
• Navigation.js -> 앱에서 사용하는 대화 상자를 제어합니다.
• main.css -> 이 페이지의 레이아웃
• template.css -> index.html과 이 페이지가 공유하는 일부 디자인 선택(배경색)

webinterface 폴더는 qgis의 qgis2web 플러그인에 의해 자동으로 생성됩니다. 새 지도를 생성하고 qgis2web 플러그인을 사용하는 경우 이 템플릿은 매우 호환됩니다. 수동 모드(GPS 좌표를 수동으로 설정)를 제공하기 위해 qgis2web.js 내부에서 몇 가지 변경 작업을 수행했지만 웹 인터페이스 콘텐츠를 변경할 때 이를 염두에 두십시오.

이 템플릿은 좌표 위치를 검색하거나 비교하지 않지만 직접 만들 수는 있습니다. 현재 위치를 얻으려면 이 자바스크립트 방법을 사용하세요.

사용할 수 있는 주목할만한 JavaScript 메소드 및 변수:

• geolocation.getPosition() -> 이 메소드는 사용자의 현재 GPS 위치를 제공합니다.
• externalGeoLocate() -> 사용자의 현재 GPS 위치를 업데이트합니다.
• manualcoords -> 수동으로 설정된 GPS 좌표입니다. manualmode가 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 ) ;
    }
  } 

시사

이 템플릿의 미리보기: 리디렉션하려면 여기를 클릭하세요.