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>

目錄

發佈留言

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

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

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

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

訂閱電子報

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

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

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

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

訂閱電子報

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