之前實作了一個功能是在 CPT 中用 ACF 開了經緯度的欄位來顯示文章的 GPS 座標，前台顯示的部分 ACF 提供了 jQuery 的程式碼可以讓開發者無痛整合，但客戶希望每篇文章的座標顯示不是用標記而是改用熱視圖來呈現整個區域的資料，因此研究了一下熱視圖該怎麼跟 ACF 提供的程式碼整合。
本想找第三方套件處理的，還好 Google Map 本身就提供熱視圖的功能，用法也滿簡單的：
- 先把要標記熱點的 GPS 座標用陣列整理好
- 建立一個 HeatmapLayer 物件，
- 把這個物件 set 到 map 物件即可完成
- 熱點的圓半徑跟漸層顏色都可以修改。
<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>
