퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 컨트롤들
  4. 맵뷰[MapView]

맵뷰[MapView]

MapView 클래스

네이티브 맵뷰를 표시합니다.

MapView를 사용하면 플랫폼에 고유한 매핑 API인 Android의 Google지도 및 iOS의 Apple Maps를 사용하여 주석이 달린 대화형 전세계 지도를 사용자에게 표시할 수 있습니다.

MapView는 네이티브 컨트롤이므로 표시할 NativeViewHost에 포함되어야 합니다. 다른 네이티브 모바일 컨트롤과 마찬가지로 현재까지는 데스크톱 대상으로 사용할 수 있는 MapView가 없습니다.

참고: .unoproj의 Packages 섹션에서 Fuse.Maps에 대한 참조를 추가해야 합니다.

1
2
3
4
5
"Packages": [
    "Fuse.Maps",
    "Fuse",
    "FuseJS"
]

앱에 포함된 MapView를 얻는 것은 간단합니다. 네이티브 컨트롤을 사용하여 평소처럼 UX에 노드를 포함하기만 하면 됩니다:

1
2
3
<NativeViewHost>
    <MapView/>
</NativeViewHost>

지도 카메라를 초기화하고 조작하려면 위도(Latitude), 경도(Longitude), 확대/축소(Zoom), 기울이기(Tilt) 및 방위(Bearing) 속성을 사용합니다. 모두 쌍방향으로 바인딩할 수 있습니다. 확대/축소는 Google의 ‘확대/축소 수준’을 따릅니다. 자세한 내용은 여기를 참조하십시오.

스타일 속성을 사용하여 렌더링 스타일을 설정하여 지도를 추가로 사용자 정의할 수 있습니다. 옵션으로는 Normal, Satellite 및 Hybrid가 있습니다.

레이블이 지정된 마커로 지도에 주석을 추가하려면 MapMarker를 참조하십시오.

안드로이드용 지도

Google 지도에는 다음이 필요합니다:

  • Google Play 라이브러리 설치 지침은 이 설명서를 참조하십시오.
  • 유효한 Google지도 API 키입니다. 설정을 하려면 Google의 설명서를 따르십시오. 키를 얻은 후에는 아래와 같이 프로젝트 파일에 키를 추가해야 합니다.
1
2
3
4
5
"Android": {
   "Geo": {
        "ApiKey": "your_key_here"
    }
}

이 예제는 노르웨이 오슬로에 있는 퓨즈의 사무실에 집중된 평균 줌 레벨을 가진 지도를 표시합니다.

UX

1
2
3
4
5
6
7
8
9
<App>
    <ClientPanel>
        <NativeViewHost>
            <MapView Latitude="59.911567" Longitude="10.741030" Zoom="10">
                <MapMarker Latitude="59.911567" Longitude="10.741030" Label="Fuse HQ"/>
            </MapView>
        </NativeViewHost>
    </ClientPanel>
</App>

MapView의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/controls/mapview#section-table-of-contents

Was this article helpful to you? Yes No

How can we help?