Tiện ích bổ sung này thêm loại khía cạnh Bản đồ, hoạt động giống như bất kỳ loại khía cạnh nào khác. Bản đồ được tạo hiển thị kết quả được mã hóa địa lý và cũng có thể lọc kết quả bằng cách chỉ hiển thị kết quả trong chế độ xem bản đồ.

Kết hợp một khía cạnh Bản đồ với một khía cạnh lân cận

Thuộc tính Bản đồ có thể được kết hợp tốt với thuộc tính Lân cận , trả về kết quả trong bán kính đã chọn từ một vị trí được chỉ định.

Khi một vị trí và bán kính được đặt (hoặc thay đổi) bằng thuộc tính Lân cận, bản đồ sẽ tự động phóng to hoặc thu nhỏ, hiển thị các vị trí nằm trong bán kính của vị trí đã đặt.

Ghim đánh dấu khía cạnh lân cận mặc định
Ghim đánh dấu khía cạnh lân cận mặc định.

Nếu khía cạnh Lân cận đang được sử dụng, nó sẽ hiển thị ghim đánh dấu màu vàng tại vị trí đã đặt. Ghim đánh dấu này có thể được tùy chỉnh , vô hiệu hóa hoặc loại trừ khỏi hành vi phân cụm điểm đánh dấu ).

Xem trang tùy chỉnh Bản đồ nâng cao của chúng tôi để biết thêm những điều bạn có thể làm với bản đồ và khía cạnh/điểm đánh dấu Vùng lân cận.

Tùy chọn có sẵn

Tên Sự miêu tả
Nguồn dữ liệu Nguồn dữ liệu phải là trường tùy chỉnh chứa dấu phẩy được phân tách bằng dấu phẩy latitude, longitude. Hoặc – nếu bạn sử dụng trường tùy chỉnh riêng cho kinh độ – chỉ có tệp latitude. Xem bên dưới để biết thêm.
Kinh độ Chọn trường tùy chỉnh để sử dụng cho longitudegiá trị, nếu được lưu trữ riêng biệt với latitude(tùy chọn). Xem bên dưới để biết thêm.
Thiết kế bản đồ Chọn thiết kế/kiểu dáng/cách phối màu cho bản đồ. Xem trang tùy chỉnh Bản đồ nâng cao để tìm hiểu cách sử dụng các kiểu bản đồ của riêng bạn .
Bật nút lọc Nội dung nút của nút “Bật tính năng lọc bản đồ” . Lưu ý: văn bản mặc định hoặc đã thay đổi có thể được dịch bằng hook facetwp_i18n , bằng plugin dịch hoặc bằng bộ lọc gettext .
Nút reset Văn bản nút của nút “Đặt lại”, xuất hiện sau khi nhấp vào nút “Bật tính năng lọc bản đồ” . Lưu ý: văn bản mặc định hoặc đã thay đổi có thể được dịch bằng hook facetwp_i18n , bằng plugin dịch hoặc bằng bộ lọc gettext .
Phân cụm điểm đánh dấu Tùy chọn này sẽ nhóm các điểm đánh dấu gần nhau thành các cụm điểm đánh dấu, từ một mức thu phóng nhất định. Xem trang tùy chỉnh Bản đồ nâng cao để biết cách tùy chỉnh hành vi phân cụm điểm đánh dấu .
Nội dung điểm đánh dấu Ajax Cho phép tải động nội dung điểm đánh dấu qua AJAX. Hoạt động tốt nhất cho bản đồ có nhiều điểm đánh dấu vì nó ngăn tải tất cả nội dung điểm đánh dấu cùng một lúc.
Giới hạn điểm đánh dấu
  • Hiển thị tất cả kết quả – sẽ hiển thị tất cả các điểm đánh dấu phù hợp với kết quả
  • Hiển thị kết quả trang hiện tại – sẽ chỉ hiển thị các điểm đánh dấu khớp với kết quả trên trang hiện tại của kết quả được phân trang. Lưu ý: điều này chỉ hoạt động với khía cạnh Máy nhắn tin thuộc loại “Số trang”. Nó không hoạt động với phân trang “Tải thêm”.
Chiều rộng / chiều cao bản đồ Chiều rộng và chiều cao của bản đồ. Không có đơn vị, pxđược giả sử: ví dụ: 300giống như 300px. Sử dụng các đơn vị CSS khác nếu cần, ví dụ: 100%để đáp ứng toàn bộ chiều rộng của vùng chứa chính. Lưu ý: không sử dụng 100%chiều cao nếu vùng chứa bản đồ không có chiều cao cố định, nếu không bản đồ sẽ không có chiều cao và sẽ không hiển thị.
Thu phóng tối thiểu / tối đa Đặt mức thu phóng tối thiểu và tối đa. Các giá trị phải là một số từ 1 (thu phóng tối thiểu) đến 20 (thu phóng tối đa).
Dự phòng lat/lng/zoom: Đặt vị trí dự phòng (lat/lng) và/hoặc mức thu phóng. Mức thu phóng phải là một số nằm trong khoảng từ 1 (thu phóng tối thiểu) đến 20 (thu phóng tối đa). Những cài đặt này chỉ được sử dụng khi không tìm thấy kết quả/điểm đánh dấu nào . Nếu bạn để trống các trường này, vĩ độ/lng mặc định là 0,0và mức thu phóng mặc định là 1. 

Với một số tùy chỉnh, cài đặt này cũng có thể được sử dụng để đặt trung tâm tùy chỉnh mặc định và mức thu phóng khi tải bản đồ .
Nội dung đánh dấu Nhập mã hiển thị (HTML và/hoặc PHP) để tạo nội dung hiển thị trong cửa sổ bật lên của cửa sổ thông tin khi điểm đánh dấu được chọn. Để biết ví dụ, xem bên dưới

Nguồn dữ liệu

Nguồn dữ liệu phải là trường tùy chỉnh chứa dấu phẩy được phân tách bằng dấu phẩy latitude, longitude.

Bạn cũng có thể sử dụng các trường tùy chỉnh riêng biệt cho vĩ độ và kinh độ, xem các tùy chọn có sẵn .

Các nguồn dữ liệu khác

Các plugin và chủ đề sau cung cấp các trường tùy chỉnh dành riêng cho vĩ độ và kinh độ có thể được sử dụng làm nguồn dữ liệu cho khía cạnh Bản đồ. Nhấp vào liên kết để xem hướng dẫn cụ thể về cách sử dụng các trường này:

Sử dụng nhiều nguồn dữ liệu/vị trí cho mỗi bài đăng

Để sử dụng trường Google Maps ACF trong trường Bộ lặp ACF, hãy chọn trường Google Maps làm nguồn dữ liệu ('my_map' trong ví dụ này).
Để sử dụng trường Google Maps ACF trong trường Bộ lặp ACF, hãy chọn trường Google Maps làm nguồn dữ liệu ( my_maptrong ví dụ này).

Có thể lập chỉ mục nhiều vị trí cho mỗi bài đăng bằng cách sử dụng trường tùy chỉnh nhiều giá trị, như trường lặp ACF hoặc ví dụ: hộp kiểm/trường thả xuống (nếu bạn có một số vị trí được chọn để chọn).

Nếu bạn sử dụng trường Bộ lặp ACF với trường phụ Google Maps, bạn cần chọn tên trường phụ Google Maps từ menu thả xuống Nguồn dữ liệu của thuộc tính Bản đồ ( my_maptrong ví dụ ở bên phải).

Đảm bảo chọn trường bên dưới tiêu đề “ACF” trong danh sách Nguồn dữ liệu thả xuống.

Khóa API của Google Maps

Tạo khóa API Google Maps

Khía cạnh Bản đồ yêu cầu khóa API Google Maps hợp lệ . Để tạo khóa, bạn phải đăng nhập vào Google Cloud Console, thiết lập dự án, thêm khóa API bên dưới API's & Services > Credentialsvà bật ba dịch vụ API sau cho khóa:

  1. API JavaScript của Bản đồ : bắt buộc để các khía cạnh Bản đồ / Vùng lân cận hoạt động
  2. API mã hóa địa lý : bắt buộc đối với nút “Định vị tôi” của khía cạnh Lân cận
  3. API địa điểm : bắt buộc đối với hộp tự động hoàn thành của khía cạnh Lân cận

Để có thể sử dụng khóa, bạn cũng cần thiết lập Tài khoản thanh toán trong Google Cloud Console và thêm dự án của mình vào đó. Bạn sẽ cần có thẻ tín dụng để thiết lập thanh toán. Có khoản tín dụng miễn phí hàng tháng là 200 USD , tương đương với hơn 28000 lượt tải bản đồ mỗi tháng.

Thêm khóa API Google Maps vào FacetWP

Sau khi tạo khóa API, hãy thêm nó vào: Settings > FacetWP > Settings > Google Maps API key.
Cả khía cạnh Bản đồ và khía cạnh Lân cận đều sử dụng khóa này.

Ngoài cài đặt của FacetWP, khóa API cũng có thể được đặt bằng hằng số trong wp-config.php:

Làm cách nào để sử dụng mã PHP tùy chỉnh?

Mã PHP có thể được thêm vào tệp tin.php của chủ đề (con) của bạn. Ngoài ra, bạn có thể sử dụng tiện ích bổ sung Móc tùy chỉnh hoặc plugin đoạn mã. Thêm thông tin

define( 'GMAPS_API_KEY', 'your-api-key' );

Hoặc với một cái móc trong hàm.php của chủ đề (con) của bạn:

Làm cách nào để sử dụng mã PHP tùy chỉnh?

Mã PHP có thể được thêm vào tệp tin.php của chủ đề (con) của bạn. Ngoài ra, bạn có thể sử dụng tiện ích bổ sung Móc tùy chỉnh hoặc plugin đoạn mã. Thêm thông tin

add_filter( ‘facetwp_gmaps_api_key’, function( $api_key) {
return ‘your-api-key’;
});

Thêm khóa API Google Maps vào Trường tùy chỉnh nâng cao

Nếu bạn đang sử dụng trường Google Map Trường tùy chỉnh nâng cao làm nguồn dữ liệu, hãy đảm bảo bạn chuyển cùng khóa API Google Maps vào ACF . ACF cần API Google Maps trong phần phụ trợ để định vị địa lý địa chỉ đã nhập cho mỗi bài đăng.

Thêm key API Google Maps vào Listify, Listable, WP Job Manager

Nếu bạn đang sử dụng chủ đề Listify , chủ đề Listable và/hoặc plugin WP Job Manager , hãy đảm bảo thêm khóa API Google Maps vào:
(Job) Listings > Settings > Google Maps API Key

Bản thân chủ đề Listify có cài đặt thứ hai để nhập khóa API Google Maps, tại:
Appearance > Customize > Listings > Map settings

Thêm nội dung đánh dấu

Cài đặt “ Nội dung điểm đánh dấu ” có thể được sử dụng để tạo nội dung của cửa sổ bật lên cửa sổ thông tin hiển thị khi điểm đánh dấu được chọn. Trường cài đặt chấp nhận mã HTML và PHP.

Ví dụ sau đây xuất ra tiêu đề, liên kết và đoạn trích:

Làm cách nào để sử dụng mã PHP tùy chỉnh?

Mã PHP có thể được thêm vào tệp tin.php của chủ đề (con) của bạn. Ngoài ra, bạn có thể sử dụng tiện ích bổ sung Móc tùy chỉnh hoặc plugin đoạn mã. Thêm thông tin

<h3>
<a href=“<?php the_permalink(); ?>” title=“<?php the_title_attribute(); ?>”>
<?php the_title(); ?>
</a>
</h3>
<?php the_excerpt(); ?>

Nội dung đánh dấu kiểu

Nếu bạn muốn tạo kiểu cho nội dung điểm đánh dấu tùy chỉnh bằng CSS, chỉ cần thêm vùng chứa <div>có lớp tùy chỉnh và sử dụng vùng chứa đó để nhắm mục tiêu các thành phần của bạn trong cửa sổ thông tin:

Làm cách nào để sử dụng mã PHP tùy chỉnh?

Mã PHP có thể được thêm vào tệp tin.php của chủ đề (con) của bạn. Ngoài ra, bạn có thể sử dụng tiện ích bổ sung Móc tùy chỉnh hoặc plugin đoạn mã. Thêm thông tin

<div class=”infowindow“>
<h3>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”>
<?php the_title(); ?>
</a>
</h3>
<?php the_excerpt(); ?>
</div>

Ví dụ: để tạo kiểu cho <h3>:

Làm cách nào để sử dụng CSS tùy chỉnh?

Mã CSS có thể được đặt trong tệp style.css của chủ đề (con) của bạn. Ngoài ra, bạn có thể thêm nó theo cách thủ công giữa <style>các thẻ trong <head>phần, trong tệp header.php của chủ đề (con) của bạn. Bạn cũng có thể tải nó bằng một hook trong tệp tin.php của chủ đề (con) hoặc trong tiện ích bổ sung Custom Hooks . Để chỉ tải mã trên các trang có các khía cạnh, hãy sử dụng facetwp_scriptshook. Để tải nó trên tất cả các trang, hãy sử dụng wp_headhoặc wp_footer. Hoặc bạn có thể sử dụng plugin đoạn mã. Thêm thông tin

.facetwp-type-map .infowindow h3 {
font-size: 18px;
font-weight: bold;
}

Ngoài ra, bạn có thể sử dụng gm-style-iwlớp của phần tử cửa sổ thông tin gốc:

Thay đổi chiều rộng hoặc chiều cao của cửa sổ thông tin điểm đánh dấu

Để thay đổi chiều rộng và/hoặc chiều cao của cửa sổ thông tin điểm đánh dấu, bạn có thể sử dụng gm-style-iwlớp.

Ví dụ sau đây đặt nó thành cố định widthcủa 300pxvà a min-heightcủa 150px. Thêm CSS trực tiếp vào CSS chủ đề của bạn hoặc thêm mã sau vào hàm.php của chủ đề (con) của bạn:

Làm cách nào để sử dụng mã PHP tùy chỉnh?

Mã PHP có thể được thêm vào tệp tin.php của chủ đề (con) của bạn. Ngoài ra, bạn có thể sử dụng tiện ích bổ sung Móc tùy chỉnh hoặc plugin đoạn mã. Thêm thông tin

add_action( ‘wp_head’, function() {
?>
<style>
.gm-style-iw {
width: 300px;
min-height: 150px;
}
</style>
<?php
}, 100 );

Nếu bạn muốn giữ độ rộng của cửa sổ thông tin linh hoạt và sử dụng max-widththay vì width, bạn sẽ cần ghi đè giá trị CSS nội tuyến mặc định của bản đồ bằng !important. Điều tương tự cũng đúng với min-widthvà max-height:

Làm cách nào để sử dụng mã PHP tùy chỉnh?

Mã PHP có thể được thêm vào tệp tin.php của chủ đề (con) của bạn. Ngoài ra, bạn có thể sử dụng tiện ích bổ sung Móc tùy chỉnh hoặc plugin đoạn mã. Thêm thông tin

add_action( ‘wp_head’, function() {
?>
<style>
.gm-style-iw {
max-width: 300px !important; /* Override the inline CSS value set by Google */
/* if needed: */
/* min-width: 200px !important; */
/* max-height: 150px !important; */
}
</style>
<?php
}, 100 );

Thêm nội dung điểm đánh dấu từ các trường tùy chỉnh ACF

Nếu bài đăng của bạn có các trường tùy chỉnh được tạo bằng Trường tùy chỉnh nâng cao , bạn có thể lấy nội dung trường tùy chỉnh bằng hàm get_field() của ACF và lặp lại nó.

Ví dụ sau hiển thị các trường và full_addressdưới tiêu đề bài đăng được liên kết. Địa chỉ email được hiển thị dưới dạng liên kết email, chỉ khi nó có sẵn:phoneemail

Làm cách nào để sử dụng mã PHP tùy chỉnh?

Mã PHP có thể được thêm vào tệp tin.php của chủ đề (con) của bạn. Ngoài ra, bạn có thể sử dụng tiện ích bổ sung Móc tùy chỉnh hoặc plugin đoạn mã. Thêm thông tin

<h4>
<a href=“<?php the_permalink(); ?>” title=“<?php the_title_attribute(); ?>”>
<?php the_title(); ?>
</a>
</h4>
<?php
$address = get_field(‘full_address’);
$phone = get_field(‘phone’);
$email = get_field(’email’);
if ( !empty( $address ) ) {
echo ‘<p>’ . $address . ‘</p>’;
}
if ( !empty( $email ) ) {
$email_address = ‘ | <a href=”mailto:’ . $email .‘”>’ . $email . ‘</a>’;
}
if ( !empty( $phone ) || !empty( $email_address ) ) {
echo ‘<p>’ . $phone . $email_address . ‘</p>’;
}

Nút “Bật tính năng lọc bản đồ”

Khi tính năng “lọc bản đồ” được bật bằng nút này, kết quả sẽ được làm mới bất cứ khi nào bản đồ được phóng to hoặc xoay. Vì vậy, sau khi nhấp vào nút, sau đó thu phóng hoặc xoay bản đồ, chỉ các kết quả trong chế độ xem của bản đồ mới được hiển thị trong danh sách đã lọc. Bạn có thể thấy điều này đang diễn ra trong bản demo bản đồ Công viên Tiểu bang .

Để hiểu cách lọc bản đồ hoạt động, bạn có thể coi khung nhìn hình chữ nhật của bản đồ hoạt động như một bộ lọc khía cạnh. Khi bật tính năng lọc bản đồ, bạn sẽ thấy tọa độ vĩ độ/lng phía dưới bên trái và vĩ độ/lng phía trên bên phải của chế độ xem bản đồ xuất hiện trong các biến URL dưới dạng giá trị hoạt động của khía cạnh bản đồ. Các tọa độ này được cập nhật khi xoay hoặc thu phóng bản đồ, giống như bất kỳ khía cạnh nào khác cập nhật giá trị của nó khi thực hiện lựa chọn.

Ẩn nút “Bật tính năng lọc bản đồ”

Hiện tại, không có cài đặt nào để tắt nút/chức năng ‘Bật lọc bản đồ’. Nếu không muốn hiển thị nút này, bạn có thể ẩn nút bằng CSS:

Làm cách nào để sử dụng CSS tùy chỉnh?

Mã CSS có thể được đặt trong tệp style.css của chủ đề (con) của bạn. Ngoài ra, bạn có thể thêm nó theo cách thủ công giữa <style>các thẻ trong <head>phần, trong tệp header.php của chủ đề (con) của bạn. Bạn cũng có thể tải nó bằng một hook trong tệp tin.php của chủ đề (con) hoặc trong tiện ích bổ sung Custom Hooks . Để chỉ tải mã trên các trang có các khía cạnh, hãy sử dụng facetwp_scriptshook. Để tải nó trên tất cả các trang, hãy sử dụng wp_headhoặc wp_footer. Hoặc bạn có thể sử dụng plugin đoạn mã. Thêm thông tin

.facetwp-map-filtering {
display: none;
}

Dịch văn bản nút “Bật lọc bản đồ” và “Đặt lại”

Có thể thay đổi văn bản của nút “Bật lọc bản đồ” và “Đặt lại” bằng cài đặt .

Cả hai văn bản đều có thể được thay đổi hoặc dịch bằng plugin dịch thuật, với facetwp_i18n hook hoặc bằng bộ lọc gettext của WordPress :

Làm cách nào để sử dụng mã PHP tùy chỉnh?

Mã PHP có thể được thêm vào tệp tin.php của chủ đề (con) của bạn. Ngoài ra, bạn có thể sử dụng tiện ích bổ sung Móc tùy chỉnh hoặc plugin đoạn mã. Thêm thông tin

add_filter( ‘gettext’, function( $translated_text, $untranslated_text, $domain ) {
if ( ‘facetwp-map-facet’ == $domain ) {
if ( $translated_text == ‘Enable map filtering’ ) {
$translated_text = ‘Use map as filter’;
}
if ( $translated_text == ‘Reset’ ) {
$translated_text = ‘Disable map as filter’;
}
}
return $translated_text;
}, 10, 3 );

Bật tính năng lọc bản đồ khi tải bản đồ

Có thể bật tính năng lọc bản đồ theo mặc định khi tải bản đồ bằng mã sau.

Tuy nhiên, hãy lưu ý rằng việc bật tính năng lọc bản đồ sẽ ngăn các khía cạnh khác – như khía cạnh Lân cận – tự động thu phóng hoặc xoay bản đồ. Điều này có thể gây nhầm lẫn cho người dùng, thậm chí còn hơn thế nếu không rõ liệu tính năng lọc bản đồ có được bật hay không. Vì vậy, không nên kết hợp điều này với việc ẩn nút “Bật tính năng lọc bản đồ” .

Làm cách nào để sử dụng mã PHP tùy chỉnh?

Mã PHP có thể được thêm vào tệp tin.php của chủ đề (con) của bạn. Ngoài ra, bạn có thể sử dụng tiện ích bổ sung Móc tùy chỉnh hoặc plugin đoạn mã. Thêm thông tin

add_action( ‘wp_footer’, function () {
?>
<script>
(function ($) {
$(document).on(‘facetwp-loaded’, function () {
if (‘undefined’ === typeof FWP_MAP) {
return;
}
var filterButton = $(“.facetwp-map-filtering”);
if (!filterButton.hasClass(‘enabled’) && ‘undefined’ == typeof FWP_MAP.enableFiltering) {
filterButton.text(FWP_JSON[‘map’][‘resetText’]);
FWP_MAP.is_filtering = true;
filterButton.addClass(‘enabled’);
FWP_MAP.enableFiltering = true;
}
});
})(jQuery);
</script>
<?php
}, 100 );

Các sự cố thường gặp với “Bật tính năng lọc bản đồ”

Nếu nút “Bật lọc bản đồ” không hoạt động, hãy đảm bảo bạn chưa tắt auto_refresh . Điều đó cũng vô hiệu hóa bản đồ khỏi tự động làm mới.