ACF Google Map 整合熱視圖

目錄

之前實作了一個功能是在 CPT 中用 ACF 開了經緯度的欄位來顯示文章的 GPS 座標,前台顯示的部分 ACF 提供了 jQuery 的程式碼可以讓開發者無痛整合,但客戶希望每篇文章的座標顯示不是用標記而是改用熱視圖來呈現整個區域的資料,因此研究了一下熱視圖該怎麼跟 ACF 提供的程式碼整合。

本想找第三方套件處理的,還好 Google Map 本身就提供熱視圖的功能,用法也滿簡單的:

  1. 先把要標記熱點的 GPS 座標用陣列整理好
  2. 建立一個 HeatmapLayer 物件,
  3. 把這個物件 set 到 map 物件即可完成
  4. 熱點的圓半徑跟漸層顏色都可以修改。
<script>
// 產生熱視圖 GPS 座標
var heatmapData = [
	<?php
	// 我偷懶直接塞 PHP 進 JS
	$args_post = array(
		'posts_per_page' => '9',
		'post_type' => 'post'
	);
	
	$query_post = new WP_Query( $args_post );
	if( $query_post->have_posts() ){
		while( $query_post->have_posts() ){
			$query_post->the_post();
			$lng = get_field('lng'); // 經度
			$lat = get_field('lat'); // 緯度
	?>
	new google.maps.LatLng(<?php echo esc_html( $lng ); ?>,<?php echo esc_html( $lat ); ?>),
	<?php };
	  wp_reset_postdata();
	}
	?>
];

var heatmap = new google.maps.visualization.HeatmapLayer({
	data: heatmapData
});

heatmap.setMap(map); // map 是地圖物件

// 設定熱視圖半徑
heatmap.set("radius", heatmap.get("radius") ? null : 20);

// 設定熱視圖漸層顏色
heatmap.set("gradient", heatmap.get("gradient") ? null : [
	"rgba(0, 255, 255, 0)",
	"rgba(0, 255, 255, 1)",
	"rgba(0, 191, 255, 1)",
	"rgba(0, 127, 255, 1)",
	"rgba(0, 63, 255, 1)",
	"rgba(0, 0, 255, 1)",
	"rgba(0, 0, 223, 1)",
	"rgba(0, 0, 191, 1)",
	"rgba(0, 0, 159, 1)",
	"rgba(0, 0, 127, 1)",
	"rgba(63, 0, 91, 1)",
	"rgba(127, 0, 63, 1)",
	"rgba(191, 0, 31, 1)",
	"rgba(255, 0, 0, 1)",
]);
</script>

目錄

賴俊吾 / Oberon Lai
賴俊吾 / Oberon Lai

現為全職 WordPress 工程師,網站開發經歷 11 年,專攻前端工程與 WordPress 佈景主題、外掛客製化開發

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!

覺得文章寫得好再幫我鼓個掌吧!

相關文章

LINE 登入外掛整合頭像顯示

近期終於把 LINE 登入外掛的頭像功能整合進去,現在只要使用登入就會自動取得 LINE 帳號的頭像作為網站個人帳號的顯示圖片。 ...

ACF 的 JS API

需求是我要在刪除 Repeater 欄位的當下觸發 myCred 外掛扣點 API,也就是當點擊移除按鈕時,點選 Tooltip ...

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

專注於分享 WordPress 開發、接案技巧、專案管理等自由工作者必備知識與心得

© 2023 想點創意科技有限公司

想點創意科技有限公司 | 統一編號 90516823
Designed by Hend Design | 隱私權政策

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!