在JavaScript中將PHP變量用於Google Maps多邊形

Question

我正在使用從數據庫中提取的一組坐標在Google地圖上繪制多邊形。

• map.php從數據庫中提取坐標
• scripts.js在准備就緒的文檔上創建地圖，並存儲所有地圖配置選項

邊界坐標字符串示例：

[52.6294414232, 1.28337337354], [52.6294108159, 1.28350410559], [52.6293577844, 1.28347057106], [52.6292373999, 1.28391974753], [52.6293340783, 1.28400089488], [52.6292540937, 1.28429051171], [52.6292088096, 1.28430189851], [52.6291929061, 1.2842268041], [52.6291753654, 1.28421070907], [52.6291251702, 1.28439909373], [52.6289228389, 1.28423612589], [52.6289538563, 1.28409064607], [52.628795581, 1.28396054235], [52.6288674082, 1.28364075593], [52.628946546, 1.28370580721], [52.6289763352, 1.28360457624], [52.6290289574, 1.2836528604], [52.6290693582, 1.28349330243], [52.6291215713, 1.2835563364], [52.6292403179, 1.28316615953],

我知道坐標字符串是有效的，因為當我手動將其輸入到地圖javascript中時，多邊形會正確顯示。

我將坐標字符串存儲在PHP變量$boundary ，然后嘗試通過map.php中的以下內容將其傳遞給javascript：

<script>
var boundary = <?php echo $boundary ?>;
</script>

在scripts.js中使用console.log(boundary)在控制台中正確記錄坐標字符串-意味着可以從js文件訪問該變量-但地圖不會繪制多邊形和錯誤，並且在索引0處出現“ Uncaught InvalidValueError :：不是LatLng或LatLngLiteral：不是對象”。

但是，如果我將所有scripts.js放在由腳本標簽包裹的map.php中，則<?php echo $boundary ?> ，多邊形將完美呈現。 這表明將變量從PHP傳遞到javascript是導致問題的原因。

我試過使用清理輸出

var boundary = <?php echo json_encode($boundary) ?>;

但沒有成功。

有人可以建議一種方法來傳遞此坐標字符串，該方法將在地圖javascript中正確呈現嗎？

Answer 1

您必須先將數字對轉換為google.maps.LatLng ，然后才能將boundary分配給地圖的path -屬性。

var boundary = <?php echo $boundary; ?>;

for(var i = 0; i < boundary.length; ++i ){
  boundary[i] = new google.maps.LatLng(boundary[i][0], 
                                       boundary[i][1]);
}
new google.maps.Polygon({path:boundary/*,more properties*/});

Answer 2

嘗試在<SCRIPT>標記之間執行PHP語句時會遇到問題。 嘗試這個：

<? print
"<script language=javascript>
   var boundary = $boundary
</script>"
?>

（根據您的喜好格式化）