javascript - 谷歌地图编码折线渲染错误

标签 javascript php google-maps google-maps-api-3

我在为我的大学在 Google map 上渲染折线时遇到问题。结果应类似于以下折线: http://goo.gl/U18jBJ (谷歌地图上从利兹到伦敦的路线)。

我正在渲染来自 Google 方向 API 的每个步骤的单独路径,而不是仅仅获取 Google 方向 map ,这样我就可以使用循环来渲染来自 Google 方向 API 的每个步骤的单独路径以及中的折线路径Rome2Rio 搜索 API 结果。

以下 php 写出 map 的 javascript:

<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(53.796490000000006, -1.5473400000000002);
var myOptions = {
    zoom: 8,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("routeMap"), myOptions);

<?php $stopCounter = 0;
foreach($travelData[0]->stops as $stop):
    echo 'var stopLatlng'.$stopCounter.' = new google.maps.LatLng('.$stop->location.');';
    echo 'var marker'.$stopCounter.' = new google.maps.Marker({
              position: stopLatlng'.$stopCounter.',
              map: map,
              title: \''.$stop->name.'\'
          });';
    ++$stopCounter;
endforeach; 
$segementCounter = 0;
foreach($travelData[0]->segments as $segment):
    echo 'var routePath'.$segementCounter.' = \''.$segment->path.'\'; ';
    echo 'var path'.$segementCounter.' = google.maps.geometry.encoding.decodePath(String(routePath'.$segementCounter.')); ';
    echo 'var route'.$segementCounter.' = new google.maps.Polyline({
              path: path'.$segementCounter.',
              strokeColor: "#FF0000",
              strokeOpacity: 1.0,
              strokeWeight: 2
            }); ';
    ++$segementCounter;
endforeach;
$segementCounter = 0;
foreach($travelData[0]->segments as $segment):
    echo 'route'.$segementCounter.'.setMap(map);';
    ++$segementCounter;
endforeach;?>

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="routeMap" class="floatLeft">
</div>

根据我的研究,似乎是 javascript 引起了问题(可能是通过转义字符),但我找不到解决方案。 php输出的代码在这里:http://jsfiddle.net/phily245/ebbCX/

最佳答案

编码路径中的反斜杠必须用另一个反斜杠转义:

http://jsfiddle.net/doktormolle/ebbCX/2/

使用json_encode应该保留原始字符串(假设反斜杠已在原始字符串中转义):

echo 'var routePath'.$segementCounter.' = '.json_encode($segment->path).';';

关于javascript - 谷歌地图编码折线渲染错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22309961/

相关文章:

javascript - 在 html Canvas 中从线 Angular 和 x 正轴创建基于圆

javascript - Firefox webextension 不复制到剪贴板

PHP 通过数组中的字符串访问嵌套对象属性

javascript - 引用错误: google is not defined After Page Refresh

google-maps - Google Map OpenLayers Kml 图标名称

iphone - 在 GooGle map 上添加 UITextField 和 UiButton

javascript - 按数组值选择选择框选项

javascript - Firefox JavaScript 表单

php - 我如何获得运行 Php 脚本的链接?

php - NULL MySQL 到 PHP PDO