MapSVG 플러그인 검토 : WordPress에서 대화식 맵 만들기

MapSVG 플러그인 검토 : WordPress에서 대화식 맵 만들기

MapSVG는 WordPress 사이트에서 대화 형 및 반응 형 맵을 만드는 데 도움이되는 멋진 WordPress 플러그인입니다. 멋진 기능 모음으로 모든 SVG 파일을 대화식 맵으로 변환 할 수 있습니다. 그게 전부는 아닙니다. 자세한 평면도, 인포 그래픽, Google지도, 클로로 플렛지도, 이미지지도 등을 만들 수 있습니다.


이 검토에서는 MapSVG를 웹에서 WordPress에 가장 적합한 매핑 플러그인 중 하나로 만드는 기능을 살펴 봅니다. 우리는 또한 플러그인을 테스트하기 때문에 계속해서 끝까지 읽습니다. 이것은 확실히 좋은 거래이므로 커피 한 잔 마시고 굴러 갑시다..

MapSVG 대화식 대화 형지도

개발자의 특별한 Roman Stepanov가 제공하는 MapSVG를 통해 대화 형지도를 쉽고 재미있게 만들 수 있습니다. 설명서를 먼저 읽어야했지만 다양한 옵션을 가지고 놀면서 즐거운 시간을 보냈습니다. 이미 말했지만 MapSVG에서 사용할 수있는 기능을 살펴 보겠습니다.

100 개 이상의 준비된지도

지상 주행을 돕기 위해 MapSVG에는 100 개가 넘는 지리 교정지도가 제공됩니다. 세계지도가 있으며 이미 클릭 가능한 지역 (국가)으로 세분화되어 있습니다. 그런 다음 각 주 / 도의 국가지도가 있습니다. 당신은 또한 몇 가지 특별한지도를 얻을.

대부분의지도가 보정되었으므로 주소 나 좌표를 사용하여지도에 마커를 추가 할 수 있습니다. 또한 자신 만의 SVG 맵을 만들어 MapSVG에 업로드 할 수 있습니다.

Inkscape 또는 Adobe Illustrator와 같은 벡터 편집 소프트웨어를 사용하여 SVG 이미지를 생성하고 빌어 먹을 것을 업로드하고 사용자 정의하기 만하면됩니다..

이것이 무엇을 의미하는지 아십니까? 즉, 대화식 다이어그램을 디자인하고 통계를 시각화하고 (일반적으로 사용자 경험을 향상시켜) 뒤로 구부리지 않아도됩니다.

데이터베이스 객체

MapSVG를 사용하면 객체를 만들어지도의 특정 영역에 추가 할 수 있습니다. 이를 통해 웹 방문자에게 몰입 형 경험을 제공하는 정보로지도를 풍부하게 할 수 있습니다.

설명을 위해 전국에 판매 할 부동산을 보유한 부동산 중개인이라고 가정합니다. 정말 잘하고 있으며 사용 가능한 속성을지도에 표시하려고합니다. 크기, 주소, 가격, 사진 등의 정보를 표시하려고합니다..

MapSVG를 사용하면 이러한 세부 정보를 데이터베이스에 추가 한 다음지도의 하나 또는 여러 영역에 정보를 첨부 할 수 있습니다. 사용자가 정의한 영역 (예 : 상태)을 클릭 할 때마다 세부 정보가 멋진 팝 오버, 상세보기 또는 툴팁으로 표시됩니다.

필터링 및 검색 가능한 디렉토리

데이터베이스 객체를 추가하는 것만으로는 충분하지 않은 것처럼 MapSVG를 사용하면 디렉토리를 만들어지도 옆에 표시 할 수 있습니다. 부동산과 유사하게 특정 주에서 사용 가능한 모든 부동산 (또는 대리인)을 보여줄 수 있습니다. MapSVG는이를 가능하게합니다.

드롭 다운 필터 또는 검색 상자를 사용하여 디렉토리의 항목을 필터링 할 수 있습니다. 또한 사용자는지도에서 특정 영역을 클릭하여 객체를 필터링 할 수 있습니다. 이 디렉토리 기능을 사용하면 가장 복잡한 다이어그램과 맵도 쉽게 이해할 수 있습니다. 또한 사용자는 UX에 적합한 정보를 쉽게 찾을 수 있습니다..

Google지도 향상

MapSVG를 Google지도와 통합 할 수 있다고 언급 했습니까? 그렇습니다. Google API 키만 있으면됩니다. 일반적으로 Google지도를 광범위하게 맞춤 설정할 수 없으며 일부 시나리오에서는 제한적이거나 제한적일 수 있습니다. MapSVG를 통해이 과제를 극복 할 수 있습니다.

어떻게? 모든 유형의 Google지도 (지형, 위성, 도로 또는 하이브리드) 위에 벡터지도를 계층화 할 수 있습니다. 벡터 이미지는 대화식이므로 드롭 할 때까지 Google지도를 수정할 수 있습니다. 여기서 명백한 최종 결과는 더 많은 유용성을 제공 할 수 있다는 것입니다.

Google지도에는 일련의 컨트롤이 제공됩니다. 이러한 컨트롤을 MapSVG 기능과 결합하면 문학에 흥미를 느끼게됩니다. 그들은“도대체 어떻게 그렇게 했습니까?”와 같을 것입니다. 이 기능을 사용하면 랜드 마크를 강조 표시하고 클릭 할 수있는 항목을 만들어 Google지도를 향상시킬 수 있습니다.

CSS, JavaScript 및 템플릿 편집기

맞춤 설정하거나 확장 할 수없는지도는 무엇인가요? Roman은 멋진 CSS 및 JavaScript 편집기로 무엇을 기반으로 한 것 같습니다. 코드를 이해하는 한 대화 형 일러스트레이션을 최대한 활용할 수 있습니다.

우선, 원하는대로 CSS를 사용하여 맵과 다이어그램의 스타일을 지정할 수 있습니다. 툴팁, 팝 오버 및 기타 정보 컨테이너에서 많은 요소의 스타일을 지정할 수 있습니다. 또한 JavaScript의 강력한 기능을 활용하여 기본지도 기능을 확장 할 수 있습니다.

또한 팝 오버, 마커 및 툴팁에 대한 사용자 정의 템플릿을 작성하는 데 도움이되는 템플릿 편집기가 제공됩니다. 템플릿 편집기는 사용하기 쉬우 며 문제가 발생할 것으로 예상하지 않습니다.

라이브 미리보기가있는 직관적 인 제어판

MapSVG로 작업하는 것은 직관적 인 관리 대시 보드 덕분에 매우 간단합니다. MapSVG로지도 및 기타 인터랙티브 일러스트레이션 제작은 처음부터 끝까지 쉽게 결합됩니다..

또한 플러그인에는 실시간 미리보기 기능이있어 변경 사항을 실시간으로 볼 수 있습니다. 이제 완성시지도가 어떻게 보이는지 궁금하지 않아도됩니다. 또한지도 모양을보기 위해 이리저리 갔거나 페이지를 새로 고칠 필요가 없습니다. 얼마나 달콤?

이미지 맵

몇 분 전에 이미지 맵을 언급했지만 인상적이기 때문에이 기능을 자체적으로 다루어야했습니다. 우리는 이미 MapSVG가 SVG 파일을 대화식지도로 자동 변환한다는 것을 알고 있습니다. SVG 파일을 그리고 업로드하고 커스터마이징하면됩니다.

그러나 PNG 및 JPEG 이미지에서 맵을 만들 수도 있다는 것을 알고 있습니까? 지금 흥미로운 것 같습니까? MapSVG에는 래스터 이미지에서 대화 형 (클릭 가능) 맵을 만들 수있는 뛰어난 그리기 도구가 제공됩니다. 이것이 어떻게 유용합니까? 대화 형 주택 계획, 청사진, 노선, 도시 계획, 좌석 배치도 등을 그릴 수 있습니다..

이러한 기능과 놀라운 덕분에 지원하다, 이 은하계에서지도와 대화 형 삽화를 만드는 것을 방해해서는 안됩니다. MapSVG는 워드 프레스를위한 최고의 플러그인입니다..

MapSVG를 설정하고 맵을 만드는 방법

MapSVG 설정은 다른 일반적인 WordPress 플러그인을 설치하는 것만 큼 쉽습니다. 플러그인을 설치하고 활성화하자마자 대화식지도를 만들 준비가되었습니다. MapSVG가 즉시 작동하므로 아무것도 구성 할 필요가 없습니다..

MapSVG 받기

실습 경험을 해보자. MapSVG 사본을 잡고 다음 지시 사항을 따르십시오. WordPress 관리 대시 보드에 로그인하여 플러그인> 새로 추가.

mapsvg 워드 프레스 플러그인 검토

다음으로 업로드 단추 (1)파일 선택 (2), 그리고 지금 설치 (3) 아래와 같이 버튼.

지도 리뷰

설치 프로세스가 완료 될 때까지 기다렸다가 플러그인 활성화 단추.

mapsvg 리뷰

그리고 그게 다야; 플러그인은 활성화 후 사용할 수 있습니다. 를 클릭하십시오 지도 SVG 제어판을 시작하는 WordPress 관리자의 항목.

mapsvg

지금까지는 프로세스가 간단하다는 데 동의합니다. 제어판에서 사전 작성된지도 중 하나를 선택하고, Google지도를 작성하고 (API 키를 복사하여 붙여 넣기하는 것만 큼 쉬운 통합이 필요함) 이미지지도를 작성하거나 SVG 파일을 업로드하거나 Google지도가 포함 된 SVG 파일.

지도 작성에 도움이 필요한 경우 클릭하여 빠른 도움을받을 수 있습니다 튜토리얼 또는 지원하다 제어판 상단의 링크. 기존지도 중 하나를 선택하겠습니다. 나는 중국과 함께 갈 것이다 어쨌든 요즘 모든 것이 만들어지기 때문에 ��

N / B : 개발자는 사용을 권장합니다 지리 교정 대신에지도 교정되지 않은 지도 때문에…

… 지리 교정 맵은 더 최신이며, 지역 제목이 있으며 지리 좌표 (위도 / 경도) 또는 자동으로 좌표로 변환되는 주소를 입력하여 마커를 추가 할 수 있습니다. – MapSVG 튜토리얼

에서 중국 (또는 원하는 다른지도)을 선택하십시오. 새로운 SVG 맵 드롭 다운 메뉴. 스크롤 막대가 싫다면 검색 창을 자유롭게 사용하십시오.

mapsvg에서 새지도 만들기

다음 화면에서 표제 그리고 변경 프리 로더 텍스트 너무 기울어지면 같은 화면에서지도 크기를 설정하고 반응 형 디자인을 끄고 (기본적으로 켜져 있으므로 다이얼을 만지지 마십시오) 툴팁과 팝 오버를 켤 수 있습니다..

또한지도가 이미 지역 (이 경우 중국 지방)으로 나뉘어져 있고 클릭 할 수 있음을 알 수 있습니다! 또한 다음을 포함한 다른 컨트롤에 익숙해 지십시오. 메뉴 드롭 다운 메뉴.

색상을 변경하고 플러그인 느낌을 얻으십시오. 로 이동 메뉴> 색상 아래 그림과 같이.

mapsvg 워드 프레스 플러그인에서 맵 색상 편집

그만큼 그림 물감 화면은 꿈의 색상을 선택하는 데 도움이됩니다. 의미하는 바는 사용하려는 색상에 제한이 없습니다. 원하는 것을 얻을 때까지 색상 선택기를 사용하십시오. WordPress가 파란색이기 때문에 파란색 음영으로 갈 것입니다. ��

색상을 선택하고 Ctrl + S 저장 아래에 설명 된대로 버튼.

보다? MapSVG는 사용하기 쉽다고했습니다. 몇 번의 클릭만으로지도 색상을 변경했으며 수년 전에 Google에서 1 위를 차지했던 것과 같은 느낌을 받았습니다. 지도의 다른 부분을 편집하는 것도 똑같이 쉽고 내 요점을 증명하기 위해 재미있을 것이므로 툴팁을 추가합니다..

MapSVG에서 툴팁 추가하기

지도에서 지역을 마우스로 가리킬 때 나타나는 툴팁을 어떻게 추가합니까? 쉬워요 잠시 후 방법을 알려 드리겠습니다.

그건 그렇고, 어떤 이유로 든 분명하지 않은 경우 주저하지 말고 공무원을 확인하십시오. MapSVG 튜토리얼 및 문서. 더 나은 방법은이 게시물의 끝 부분에있는 코멘트 섹션을 참조하십시오. 토르 너만을 위해서. 그 망치는 모든 것을 해결합니다.

툴팁 추가에는 템플릿 추가가 포함됩니다 (앞서 언급 한 템플릿 편집기를 기억하십니까?). 이를 위해 메뉴> 템플릿 그런 다음 지역 툴팁. 

mapsvg wordpress 플러그인에 툴팁 추가

그런 다음 템플릿 편집기에서 다음 코드를 추가하고 Ctrl + S 저장 위와 같이 버튼.

지방: {{표제}}

위의 코드는 핸들 바 태그. 지역의 제목 만 표시하려면 {{title}} 태그를 사용하십시오. 잠시 후에 배울 수있는대로 사용자 정의 필드를 정의 할 수도 있습니다. 먼저 툴팁 기능을 켜 보겠습니다.

로 이동 메뉴> 설정 켜고 툴팁 아래에 설명 된 기능.

지도 리뷰

위의 스크린 샷에서 볼 수 있듯이 툴팁이 활성화되어 있습니다. 아직도, 나는 당신이 상상할 수없는 방법으로 툴팁을 풍부하게 할 수 있도록 사용자 정의 필드를 추가하는 방법을 보여줄 것이라고 언급했습니다. 툴팁에 사진과 추가 정보를 추가한다고 가정 해 보겠습니다. 어떻게 하시겠습니까? 이를 위해 우리는 데이터베이스 객체 우리는 앞서 언급했다.

데이터베이스 객체를 통해 사용자 정의 필드 추가

MapSVG를 사용하면 맵에 사용자 정의 필드를 추가 할 수 있습니다. 이미 {{title}} 필드가 있지만 더 많은 사용자 정의 필드를 추가하는 방법을 살펴 보겠습니다. 다음을 포함하여 사용자 정의 필드를 선택할 수 있습니다 텍스트, 텍스트 영역, 확인란, 이미지, 등등. Nei Mongol Province에 이미지를 추가합시다.

이동 메뉴> 지역 클릭 필드 편집 아래 이미지에서 강조 표시 한대로.

MapSVG에서 사용자 정의 필드 추가

다음 화면에서 영상 버튼을 누른 다음 필드 저장 아래와 같이 버튼.

를 클릭하여 변경 사항을 저장하십시오 Ctrl + S 저장 단추. 항상 변경 사항을 저장하십시오.

다음은 명부 아래 이미지와 같이 버튼.

지도를로 전환 지역 편집 지역을 클릭합니다 (Nei Mongol을 선택했습니다). 새로운 맞춤 입력란이 표시됩니다 (이미지) 오른쪽으로. 을 치다 검색 단추. 아래 이미지 참조.

다음 화면에서 이미지를 추가하고 이미지 선택 단추.

당신은 다시 리디렉션됩니다 지역 편집 클릭해야하는 화면 확인 (1) 단추. 그런 다음 Ctrl + S 저장 (2) 버튼을 클릭 한 다음 미리보기 (3) 아래와 같이 모드.

이 시점에서 Nei Mongol 위로 마우스를 가져 가면 이미지가 툴팁에 나타나지 않습니다. 왜? 이미지 용 템플릿을 만들지 않았습니다. 이 순간에 그렇게하겠습니다.

로 이동 메뉴> 템플릿> 영역 툴팁 코드를 다음과 같이 변경하십시오.

지방: {{표제}}
첫 번째 이미지 :


모든 이미지 :
{{#each images}} {{/마다}}

자세한 설명을위한 이미지는 다음과 같습니다. 명중해야 저장 단추.

이제 선택한 지역 (이 경우 Nei Mongol)에 마우스를 올려 놓으십시오. 당신이 무엇을보고 말해. 이것은 내 화면에 무엇입니까.

꽤 깔끔 하지요? MapSVG 맵에 사용자 정의 필드를 추가하는 방법을 배웠습니다. 팝 오버와 마커를 추가하는 것도 파이만큼 쉽습니다. 또한 이러한 기본 사항을 알고 있으면 태양 아래에서 대화 형지도 / 도표를 작성하는 것이 좋습니다.

특히 Roman Stepanov가 튜토리얼을 통해 훌륭한 지원과 놀라운 지침을 제공하기 때문에 MapSVG로 작업하는 것은 4 학년 학생들의 작품입니다. WordPress 사이트에지도를 표시하려면 변경 사항을 저장하고 페이지> 새로 추가.

다음으로 지도 SVG 버튼을 클릭하고지도를 선택하십시오. 이것은 단축 코드를 추가합니다 [mapsvg id =”17 ″ title =”중국”] WordPress 페이지로 이동하십시오. 어쨌든 단축 코드를 사용하여 사이트의 아무 곳이나지도를 추가하십시오. 걱정하지 마십시오. MapSVG로 만든지도는 반응 속도가 100 %이므로 여러 기기에서 멋지게 보입니다..

그런 다음 게시를 누르고 프론트 엔드에서 결과를 봅니다..

결론

각 기능을 살펴 본다면 하루 종일 여기에있을 것입니다. MapSVG 워드 프레스지도 플러그인 테스트 드라이브를 제공하십시오. 당신과 나 사이에, 그것은 당신이 필요로 할 유일한 WordPress 맵 플러그인입니다.

질문이나 제안이 있습니까? 아래 댓글 섹션을 통해 언제든지 문의 해주세요. 건배!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map