在 javascript 中为 Google Maps 多边形使用 PHP 变量答案

【问题标题】：Using PHP variable in javascript for Google Maps polygon在 javascript 中为 Google Maps 多边形使用 PHP 变量
【发布时间】：2014-04-07 16:55:27
【问题描述】：

我正在使用从数据库中提取的一组坐标在 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 中，然后尝试将其传递给 javascript，在 map.php 中使用以下内容：

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

在 scripts.js 中使用 console.log(boundary) 在控制台中正确记录坐标字符串 - 这意味着可以从 js 文件访问该变量 - 但地图不会绘制多边形并出现“Uncaught InvalidValueError: at index 0:不是 LatLng 或 LatLngLiteral：不是对象”。

但是，如果我将所有的scripts.js 放在map.php 中并用脚本标签包裹，那么<?php echo $boundary ?>，多边形就会完美呈现。这表明将变量从 PHP 传递到 javascript 是导致问题的原因。

我已经尝试使用

清理输出

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

但没有成功。

任何人都可以建议一种传递此坐标字符串的方法，该方法将在地图 javascript 中正确呈现吗？

【问题讨论】：

标签： javascript php google-maps

【解决方案1】：

在将boundary 分配给映射的path 属性之前，您必须将数字对转换为google.maps.LatLng。

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*/});

【讨论】：

感谢您的回复，但如果是这样，为什么手动输入相同的字符串或在 PHP 中回显 $boundary var 有效，而在 javascript 中却不行？它们应该是做同样事情的三种方法？
什么在 PHP 中有效？ maps-API 是一个 javascript 库。
如果我将 javascript 的内容转储到 php 文件中的脚本标签中并从那里运行它，它会完美地绘制多边形。问题似乎是将字符串/变量从 PHP 传递到 javascript。
我不知道你到底把什么丢在那里，但我相信这没什么区别。

【解决方案2】：

尝试在

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

（根据您的喜好格式化）

【讨论】：