Đánh giá Plugin MapSVG: Tạo Bản đồ tương tác trong WordPress

Đánh giá Plugin MapSVG: Tạo Bản đồ tương tác trong WordPress

MapSVG là một plugin WordPress tiện lợi giúp bạn tạo các bản đồ tương tác và đáp ứng trên trang web WordPress của bạn. Nhờ có bộ tính năng hay, bạn có thể chuyển đổi bất kỳ tệp SVG nào thành bản đồ tương tác. Đó không phải là tất cả, bạn có thể tạo các sơ đồ tầng chi tiết, infographics, bản đồ Google, bản đồ Chloropleth, bản đồ hình ảnh và nhiều hơn nữa.


Trong bài đánh giá này, chúng tôi xem xét các tính năng giúp MapSVG trở thành một trong những plugin lập bản đồ tốt nhất cho WordPress trên web. Chúng tôi cũng kiểm tra ổ đĩa plugin, vì vậy hãy đi xung quanh và đọc từ đầu đến cuối. Đây chắc chắn là một thỏa thuận tốt, vì vậy hãy kiếm cho mình một cốc cà phê và để cho cuộn.

Bản đồ tương tác MapSVG cho WordPress

Được mang đến cho bạn bởi nhà phát triển ngoại cỡ Roman Stepanov, MapSVG giúp việc tạo bản đồ tương tác dễ dàng và thú vị. Tôi đã có một thời gian tuyệt vời để chơi xung quanh với các tùy chọn khác nhau mặc dù tôi phải đọc tài liệu trước. Điều đó đang được nói, chúng ta hãy nhìn vào các tính năng có sẵn trong MapSVG.

Hơn 100 bản đồ sẵn sàng

Để giúp bạn tiếp tục chạy, MapSVG đi kèm với hơn 100 bản đồ được hiệu chỉnh địa lý. Có một bản đồ thế giới, và nó đã được chia thành các khu vực (quốc gia) có thể nhấp. Sau đó, bạn có bản đồ quốc gia với các tiểu bang / tỉnh tương ứng. Bạn cũng có được một vài bản đồ đặc biệt.

Và vì hầu hết các bản đồ được hiệu chỉnh, bạn có thể thêm các điểm đánh dấu vào bản đồ bằng địa chỉ hoặc tọa độ. Trên hết, bạn có thể tạo bản đồ SVG của riêng mình và tải chúng lên MapSVG.

Tất cả những gì bạn phải làm là tạo một hình ảnh SVG bằng bất kỳ phần mềm chỉnh sửa vector nào như Inkscape hoặc Adobe Illustrator, tải lên thứ chết tiệt đó và tùy chỉnh đi.

Bạn có biết nó có nghĩa là gì không? Điều đó có nghĩa là bạn có thể thiết kế sơ đồ tương tác và trực quan hóa số liệu thống kê (và nói chung là cải thiện trải nghiệm người dùng) mà không cần cúi xuống.

Đối tượng cơ sở dữ liệu

MapSVG cho phép bạn tạo các đối tượng và thêm chúng vào các khu vực cụ thể trên bản đồ của bạn. Điều này cho phép bạn làm phong phú bản đồ của mình với thông tin cung cấp cho khách truy cập web của bạn trải nghiệm tuyệt vời.

Đối với mục đích minh họa, chúng ta hãy giả sử trong một phút bạn là một đại lý bất động sản có tài sản để bán trên toàn quốc. Bạn làm rất tốt và muốn hiển thị các thuộc tính có sẵn trên bản đồ. Bạn muốn hiển thị thông tin như kích thước, địa chỉ, giá cả, hình ảnh và những thứ tương tự.

MapSVG cho phép bạn thêm các chi tiết này vào cơ sở dữ liệu và sau đó đính kèm thông tin vào một hoặc nhiều khu vực trên bản đồ của bạn. Bất cứ khi nào người dùng nhấp vào khu vực bạn xác định, nói trạng thái, các chi tiết sẽ được hiển thị trong một cửa sổ bật lên đẹp, chế độ xem chi tiết hoặc chú giải công cụ.

Thư mục có thể lọc và tìm kiếm

Như thể việc thêm các đối tượng cơ sở dữ liệu là không đủ, MapSVG cho phép bạn tạo một thư mục và hiển thị nó bên cạnh bản đồ của bạn. Đi với sự tương tự bất động sản của chúng tôi, bạn có thể muốn hiển thị tất cả các tài sản (hoặc đại lý) có sẵn trong một trạng thái nhất định. MapSVG làm cho điều này rất có thể.

Người dùng có thể lọc các mục trong thư mục bằng các bộ lọc thả xuống hoặc hộp tìm kiếm. Hơn nữa, người dùng có thể lọc các đối tượng bằng cách nhấp vào một khu vực cụ thể trên bản đồ. Tính năng thư mục này làm cho ngay cả các sơ đồ và bản đồ phức tạp nhất cũng dễ hiểu. Ngoài ra, người dùng có thể tìm thấy thông tin một cách dễ dàng, đây là điểm cộng cho UX của bạn.

Nâng cao Google Maps

Tôi đã đề cập đến việc bạn có thể tích hợp MapSVG với Google Maps chưa? Có, bạn có thể và bạn chỉ cần một khóa Google API. Thông thường, bạn không thể tùy chỉnh rộng rãi Google Maps, điều này có thể hoặc có thể giới hạn trong một số trường hợp. MapSVG cho phép bạn vượt qua thử thách này.

Làm sao? Bạn có thể xếp lớp bản đồ vectơ lên ​​trên bất kỳ loại Google Map nào (địa hình, vệ tinh, đường hoặc lai). Và vì hình ảnh vector là tương tác, sau đó bạn có thể sửa đổi Google Map của mình cho đến khi bạn thả. Kết quả cuối cùng rõ ràng ở đây là bạn có thể cung cấp nhiều khả năng sử dụng hơn.

Hãy nhớ rằng bản đồ Google đi kèm với một bộ điều khiển. Kết hợp các điều khiển này với các tính năng của MapSVG và bạn sẽ khiến người dùng của bạn phát điên vì sự phấn khích. Họ sẽ như thế nào, làm sao cái quái đó họ làm thế? Tính năng này cho phép bạn nâng cao bản đồ Google của mình bằng cách đánh dấu các mốc và làm cho mọi thứ có thể nhấp được.

Trình chỉnh sửa CSS, JavaScript và Mẫu

Việc sử dụng bản đồ mà bạn có thể tùy chỉnh hoặc mở rộng là gì? Roman dường như có cơ sở này với các trình soạn thảo CSS và JavaScript tiện lợi. Miễn là bạn biết cách của mình xung quanh mã, bạn có thể đẩy các minh họa tương tác của mình đến giới hạn.

Để bắt đầu, bạn có thể định kiểu bản đồ và sơ đồ của mình bằng CSS theo ý muốn và không bị đổ mồ hôi. Bạn có thể định kiểu nhiều yếu tố từ chú giải công cụ, cửa sổ bật lên và các thùng chứa thông tin khác. Trên hết, bạn có thể tận dụng sức mạnh của JavaScript để mở rộng chức năng bản đồ mặc định.

Ngoài ra, bạn nhận được một trình chỉnh sửa mẫu giúp bạn tạo các mẫu tùy chỉnh cho cửa sổ bật lên, điểm đánh dấu và chú giải công cụ. Trình chỉnh sửa mẫu rất dễ sử dụng, chúng tôi không mong đợi bạn gặp phải bất kỳ sự cố nào.

Bảng điều khiển trực quan với bản xem trước trực tiếp

Làm việc với MapSVG khá đơn giản nhờ bảng điều khiển quản trị trực quan giúp việc tạo bản đồ trở nên dễ dàng. Tạo bản đồ và minh họa tương tác khác với MapSVG được kết hợp dễ dàng từ đầu đến cuối.

Trên hết, plugin đi kèm với tính năng xem trước trực tiếp cho phép bạn xem các thay đổi của mình trong thời gian thực. Bây giờ bạn không thể tự hỏi làm thế nào bản đồ của bạn sẽ trông như thế nào khi hoàn thành. Hơn nữa, bạn không phải đi tới đi lui (hoặc làm mới một trang) để xem bản đồ của bạn trông như thế nào. Thật ngọt ngào?

Bản đồ hình ảnh

Chúng tôi đã đề cập đến bản đồ hình ảnh một vài phút trước đây, nhưng tôi phải tự mình đề cập đến tính năng này vì tôi nghĩ nó ấn tượng. Chúng ta đã biết rằng MapSVG tự động chuyển đổi các tệp SVG thành các bản đồ tương tác. Chỉ cần vẽ một tệp SVG, tải nó lên và tùy chỉnh.

Nhưng bạn có biết bạn cũng có thể tạo bản đồ từ hình ảnh PNG và JPEG không? Nghe có vẻ thú vị phải không? MapSVG đi kèm với các công cụ vẽ tuyệt vời cho phép bạn tạo các bản đồ tương tác (có thể nhấp) từ hình ảnh raster. Điều này hữu ích như thế nào? Bạn có thể vẽ các kế hoạch nhà tương tác, đồ án, tuyến đường, kế hoạch thành phố, biểu đồ chỗ ngồi và nhiều hơn nữa.

Nhờ những tính năng này và tuyệt vời ủng hộ, không có gì ngăn cản bạn tạo bản đồ và minh họa tương tác ra khỏi thiên hà này. Bầu trời là giới hạn ở đây các bạn ạ vì MapSVG là một plugin bản đồ vô nghĩa (và có lẽ là tốt nhất) cho WordPress.

Cách thiết lập MapSVG và tạo bản đồ

Thiết lập MapSVG dễ dàng như cài đặt bất kỳ plugin WordPress điển hình nào khác. Bạn đã sẵn sàng bắt đầu tạo bản đồ tương tác ngay khi bạn cài đặt và kích hoạt plugin. Bạn không cần cấu hình bất cứ thứ gì vì MapSVG hoạt động ngay lập tức.

Nhận MapSVG

Hãy để có được một số kinh nghiệm thực hành. Lấy một bản sao của MapSVG và làm theo các hướng dẫn sau. Đăng nhập vào bảng điều khiển quản trị viên WordPress của bạn và điều hướng đến Plugin> Thêm mới.

mapsvg đánh giá plugin wordpress

Tiếp theo, nhấn Tải lên cái nút (1)Chọn tệp (2), và đánh Cài đặt ngay (3) nút như hình dưới đây.

mapsvg đánh giá

Đợi quá trình cài đặt hoàn tất và sau đó nhấp vào Kích hoạt Plugin cái nút.

đánh giá mapsvg

Và đó là điều đó; plugin đã sẵn sàng để sử dụng sau khi kích hoạt. Bấm vào MapSVG mục trên quản trị viên WordPress để khởi chạy bảng điều khiển.

mapsvg

Cho đến nay rất tốt, tôi nghĩ bạn sẽ đồng ý quá trình này là đơn giản. Trên bảng điều khiển, bạn có thể chọn một trong những bản đồ được tạo sẵn, tạo bản đồ Google (trước tiên cần tích hợp, dễ dàng như sao chép khóa API), xây dựng bản đồ hình ảnh, tải lên tệp SVG hoặc tải xuống tệp Tệp SVG với bản đồ Google.

Nếu bạn cần trợ giúp để tạo bản đồ, bạn có thể nhận trợ giúp nhanh bằng cách nhấp vào Hướng dẫn hoặc là Ủng hộ các liên kết ở trên cùng của bảng điều khiển. Hãy để Lừa chọn một trong những bản đồ có sẵn. Tôi sẽ đi với trung quốc bởi vì mọi thứ được tạo ra ở đó ngày nay ��

Không có Nhà phát triển khuyên bạn nên sử dụng hiệu chuẩn địa lý bản đồ thay vì không hiệu chuẩn bản đồ vì dạy

Các bản đồ được hiệu chỉnh địa lý mới hơn, có tiêu đề Vùng và bạn có thể thêm Dấu theo tọa độ địa lý (vĩ độ / kinh độ) hoặc chỉ bằng cách nhập địa chỉ được chuyển đổi thành tọa độ tự động. – Hướng dẫn về MapSVG

Chọn Trung Quốc (hoặc bất kỳ bản đồ nào bạn thích) từ Bản đồ SVG mới trình đơn thả xuống. Nếu bạn ghét thanh cuộn, hãy sử dụng hộp tìm kiếm.

tạo bản đồ mới trong mapsvg

Trên màn hình tiếp theo, điền vào Tiêu đề và thay đổi Trình tải trước văn bản nếu bạn có khuynh hướng như vậy. Trên cùng một màn hình, bạn có thể đặt kích thước bản đồ của mình, tắt thiết kế phản hồi (mặc định nó bật, vì vậy, không nên chạm vào mặt số), bật công cụ và bật lên trong số những thứ khác.

Bạn cũng sẽ nhận thấy bản đồ đã được chia thành các khu vực (các tỉnh của Trung Quốc trong trường hợp của chúng tôi) và chúng đã có thể nhấp được! Ngoài ra, làm quen với các điều khiển khác bao gồm Thực đơn trình đơn thả xuống.

Hãy để chúng tôi thay đổi một số màu sắc, và cảm nhận về plugin. Hướng đến Menu> Màu sắc như hình dưới đây.

chỉnh sửa màu bản đồ trong plugin mapsvg mapspress

Các Màu sắc màn hình giúp bạn chọn màu sắc cho những giấc mơ của bạn. Ý tôi là không có giới hạn cho màu sắc mà bạn muốn sử dụng. Chỉ cần làm việc chọn màu cho đến khi bạn có một cái gì đó bạn thích. Tôi sẽ đi với màu xanh lam vì WordPress là cưng ��

Chọn màu sắc của bạn và đừng quên nhấn Lưu Ctrl + S nút như chúng tôi minh họa dưới đây.

Xem? Tôi đã nói với bạn MapSVG rất dễ sử dụng. Với một vài lần nhấp chuột, tôi đã thay đổi màu sắc bản đồ của mình và cảm giác thật tuyệt – giống như lần trước, nhiều năm trước, khi tôi xếp hạng đầu tiên trên Google. Chỉnh sửa bất kỳ phần nào khác của bản đồ đều dễ dàng như nhau và để chứng minh quan điểm của mình, tôi sẽ thêm các chú giải công cụ vì điều đó sẽ rất vui.

Thêm chú giải công cụ trong MapSVG

Vậy, làm thế nào để bạn thêm các chú giải công cụ xuất hiện khi bạn di chuột qua một khu vực trên bản đồ của bạn? Thật dễ dàng, và tôi sẽ chỉ cho bạn cách trong một khoảnh khắc.

Nhân tiện, nếu có gì rõ ràng vì lý do này hay lý do khác, thì don do dự kiểm tra chính thức Hướng dẫn và tài liệu về MapSVG. Tốt hơn hết, hãy nhấn vào phần bình luận ở cuối bài này và tôi sẽ triệu tập Thần sấm chỉ dành cho bạn. Cái búa đó giải quyết mọi thứ

Ngoài ra, việc thêm các chú giải công cụ liên quan đến việc thêm một mẫu (nhớ trình soạn thảo mẫu mà chúng ta đã đề cập trước đó?). Đối với điều đó, điều hướng đến Menu> Mẫu và sau đó chọn Vùng công cụ. 

thêm chú giải công cụ trong plugin mapsvg mapspress

Tiếp theo, thêm mã sau vào trình chỉnh sửa mẫu và nhấn Lưu Ctrl + S nút như hình trên.

Tỉnh: {{tiêu đề}}

Đoạn mã trên là HTML đơn giản với Thẻ tay lái. Nếu bạn thích chỉ hiển thị tiêu đề của khu vực của mình, bạn sử dụng thẻ {{title}}. Bạn có thể xác định các trường tùy chỉnh của riêng mình vì bạn sẽ học trong giây lát. Nhưng trước tiên, chúng ta hãy bật tính năng chú giải công cụ.

Hướng đến Menu> Cài đặt và bật Chú giải công cụ tính năng như chúng tôi minh họa dưới đây.

mapsvg đánh giá

Như bạn có thể thấy trong ảnh chụp màn hình ở trên, chú giải công cụ của chúng tôi đang hoạt động. Tuy nhiên, tôi đã đề cập tôi sẽ chỉ cho bạn cách thêm các trường tùy chỉnh để bạn có thể làm phong phú thêm các chú giải công cụ của mình theo những cách không thể tưởng tượng được. Hãy nói rằng bạn muốn thêm ảnh và thêm thông tin vào chú giải công cụ của bạn. Làm thế nào bạn sẽ đi về nó? Vì vậy, chúng tôi kêu gọi đối tượng cơ sở dữ liệu chúng tôi đã đề cập trước đó.

Thêm trường tùy chỉnh thông qua các đối tượng cơ sở dữ liệu

MapSVG cho phép bạn thêm các trường tùy chỉnh vào bản đồ của mình. Chúng tôi đã có trường {{title}}, nhưng hãy để xem cách chúng tôi có thể thêm nhiều trường tùy chỉnh hơn. Bạn có thể lựa chọn các lĩnh vực tùy chỉnh bao gồm văn bản, textarea, hộp kiểm, hình ảnh, và như thế. Hãy để chúng tôi thêm một số hình ảnh cho tỉnh Nei Mongol.

Đi đến Menu> Khu vực và nhấp vào Chỉnh sửa các trường nút như chúng tôi nhấn mạnh trong hình dưới đây.

thêm các trường tùy chỉnh trong MapSVG

Trên màn hình tiếp theo, nhấn Hình ảnh nút và sau đó là Lưu các lĩnh vực nút như hình dưới đây.

Lưu các thay đổi của bạn bằng cách nhấp vào Lưu Ctrl + S cái nút. Luôn nhớ lưu các thay đổi của bạn.

Tiếp theo nhấn Danh sách nút như trong hình bên dưới.

Chuyển bản đồ của bạn sang Chỉnh sửa vùng và nhấp vào một khu vực (chúng tôi đã chọn Nei Mongol). Bạn sẽ thấy trường tùy chỉnh mới của bạn (Hình ảnh) rẽ phải. Lượt Duyệt cái nút. Xem hình dưới đây.

Trên màn hình tiếp theo, thêm hình ảnh của bạn và nhấn Chọn hình ảnh cái nút.

Bạn sẽ được chuyển hướng trở lại Chỉnh sửa vùng màn hình nơi bạn phải nhấp vào Được (1) cái nút. Tiếp theo, nhấp vào Lưu Ctrl + S (2) nút và sau đó quay trở lại Xem trước (3) chế độ như hình dưới đây.

Nếu bạn cố gắng di chuột qua Nei Mongol vào thời điểm này, hình ảnh đã giành được xuất hiện trong tooltip. Tại sao? Chà, chúng tôi đã tạo ra một mẫu cho hình ảnh. Hãy để Lừa làm điều đó ngay lúc này.

Hướng đến Menu> Mẫu> Vùng công cụ và thay đổi mã thành này:

Tỉnh: {{tiêu đề}}
Hình ảnh đầu tiên:


Tất cả hình ảnh:
{{#each hình ảnh}} {{/mỗi}}

Đây là một hình ảnh để minh họa thêm. Nhớ đánh Tiết kiệm cái nút.

Bây giờ, hãy thử di chuyển qua khu vực bạn đã chọn (Nei Mongol trong trường hợp của chúng tôi). Nói cho tôi biết những gì bạn nhìn thấy. Đây là những gì trên màn hình của tôi.

Khá gọn gàng đúng không? Bạn vừa học cách thêm các trường tùy chỉnh vào bản đồ MapSVG của mình. Thêm popovers và đánh dấu cũng dễ dàng như chiếc bánh. Ngoài ra, miễn là bạn biết những điều cơ bản này, bạn có thể tạo bất kỳ sơ đồ / sơ đồ tương tác nào dưới ánh mặt trời.

Làm việc với MapSVG là công cụ của học sinh lớp bốn, đặc biệt là vì Roman Stepanov cung cấp hỗ trợ tuyệt vời và hướng dẫn tuyệt vời thông qua các hướng dẫn. Để hiển thị bản đồ của bạn trên trang web WordPress của bạn, hãy lưu các thay đổi của bạn và điều hướng đến Trang> Thêm mới.

Tiếp theo, nhấn MapSVG nút như hình trên và chọn bản đồ của bạn. Điều này thêm mã ngắn [mapsvg id = xông 17 ″ title = trực tiếp Trung Quốc] đến trang WordPress của bạn. Bằng mọi cách, vui lòng thêm bản đồ vào bất cứ đâu trên trang web của bạn bằng cách sử dụng mã ngắn. Đừng lo lắng, bản đồ bạn tạo bằng MapSVG phản hồi 100% có nghĩa là chúng sẽ trông tuyệt vời trên nhiều thiết bị.

Tiếp theo, nhấn xuất bản và xem kết quả trên frontend.

Phần kết luận

Chúng tôi sẽ ở đây cả ngày nếu chúng tôi trải qua từng tính năng, nhưng tôi khuyến khích bạn nên lấy bản sao của chính bạn Plugin bản đồ WordPress MapSVG và cho nó một ổ đĩa thử nghiệm. Giữa bạn và tôi, nó là plugin bản đồ WordPress duy nhất bạn cần.

Bạn có một câu hỏi hoặc đề nghị? Xin đừng ngần ngại tiếp cận thông qua phần bình luận bên dưới. Chúc mừng!

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