WRLD를 사용하여 실시간 데이터로 쇼핑몰 맵을 만드는 방법

이 튜토리얼은 WRLD를 사용하여 대화식, 실시간 3D 쇼핑몰 맵을 구축하여 동적 상점 정보 및 탐색으로 사용자 경험을 향상시킵니다. 우리는 두 가지 데모를 만들 것입니다 : 하나는 실내 쇼핑몰 맵에 대화식 마커를 추가하고, 다른 하나는 유색 다각형이있는 주차 용량을 보여줍니다. 전체 프로젝트는 Github에서 사용할 수 있습니다

> 간단한 Google지도를 넘어 WRLD는 대화식 마커가있는 실내 3D 맵을 허용하여 고유 한 사용자 경험과 In-MAP UI 상호 작용을 제공합니다.

이 튜토리얼은 다음과 같습니다

설정 : WRLD API 키를 얻고 개발 환경을 준비하고 (node.js, npm, yarn). 두 가지 접근 방식 : 코드없는 솔루션을 위해 WRLD의 내장 도구 (MAP 디자이너, Places Designer)를 사용하거나 유연성을 높이기 위해 사용자 정의 앱을 구축합니다. 실내지도 제어 :

쇼핑몰 내에서 쉬운 바닥 내비게이션을위한 컨트롤 구현. 자동 실내보기 :

실내보기에 자동으로로드하기 위해 맵을 설정하십시오. 커스텀 스토어 카드 :

실시간 데이터를 표시하는 동적 상점 카드 생성 (프로모션, 가용성). 주차 가용성 시각화 : 주차 공간 점유를 나타내기 위해 컬러 다각형을 사용합니다.

전제 조건 :

JavaScript Dom, ES6 구문 및 ES6 모듈의 기본 이해. WRLD 플랫폼에 대한 친숙 함은 도움이되지만 필요하지 않습니다.

• 시작하기 : 무료 WRLD 계정을 만들고 API 키를 얻으십시오 (지침은 "동적 3D 맵 빌드"참조).
맵 구축 (사용자 정의 앱 접근) :
• 1. 프로젝트 설정 : 프로젝트 폴더 생성, 초기화 및 필요한 디렉토리 및 파일을 만듭니다 (SRC/JS, SRC/JS, SRC/CSS, Index.html, App.JS, App.CSS, ENV를 만듭니다. .js). 종속성 : 설치 , , babel (ES6 컴파일의 경우), 소포 (Bundler) 및 JSON 서버 (더미 API의 경우). API 키 : package.json wrld API 키를
  기본 맵 :
  2. 를 사용하여 기본 맵을 만듭니다. 실내 제어 : 필요한 스크립트 (jQuery, jQuery ui, ) 및 컨테이너 div ()에 를 추가하십시오. 실내 제어를 wrld.js 자동 실내 진입 : axios 이벤트에서 실내 맵 ID를 결정하고
  를 사용하여 맵 하중에서 실내보기를 자동으로 입력하십시오. 저장 카드 데이터 :
  3. 가 포함 된 저장 정보 (좌표, 연락처 세부 정보, 개방 시간)로 채 웁니다. 로컬 API 서버를 생성하려면 를 실행하십시오 상점 카드 디자인 및 구현 : 는 저장 카드 (JSRENDER 사용) 및 JSON 서버에서 데이터를 가져 오기위한 서비스 ()에 대한 HTML 템플릿을 만듭니다. 마커 클릭의 팝업에 상점 카드를 표시하려면 팝업 서비스 ()를 구현하십시오. 클릭 리스너를 첨부하여 팝업 서비스를 트리거하기 위해 클릭 리스너를 첨부하는 마커를 맵에 추가하십시오. 주차 가용성 : 는 별도의 HTML 파일 () 및 javaScript 파일 (를 사용하여 다각형을 만듭니다. 색상 코딩을 사용하여 주차 점유를 나타냅니다. socket.io를 사용하여 실시간 업데이트를 구현하십시오 (, ). socket.io 연결 및 방송 주차 업데이트를 처리하려면 사용자 정의 서버 ()를 만듭니다. 클라이언트 측 코드를 업데이트하여 이러한 업데이트를 듣고 처리합니다. env.js
  4. 이 자세한 고장은 이러한 대화식 3D 맵 구축에 대한 포괄적 인 안내서를 제공합니다. 완전한 코드 스 니펫 및 자세한 내용은 제공된 링크를 참조하십시오. 이러한 데모를 확장 할 수있는 가능성은 방대하여 실제 데이터 소스 및 광범위한 응용 프로그램과 통합 할 수 있습니다.

위 내용은 WRLD를 사용하여 실시간 데이터로 쇼핑몰 맵을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!