Google Maps编码折线渲染错误 [英] Google Maps Encode Polyline Rendering Wrong

问题描述

我在为我的大学在Google地图上绘制折线时遇到问题.结果应看起来像以下折线: http://goo.gl/U18jBJ (Google将利兹的路线映射到伦敦).

I am having problems rendering polylines on a Google map for my univer. The result should look like the polyline on: http://goo.gl/U18jBJ (Google maps directions from Leeds to London).

我正在渲染来自Google Directions API的每个步骤的单个路径，而不仅仅是获取Google路线图，因此我可以使用循环来渲染来自Google Directions API的每个步骤的单个路径以及中的折线路径Rome2Rio搜索API结果.

I am rendering individual paths from each step from the Google directions API instead of just getting a Google directions map, so that I can use a loop to render the individual paths from each step from the Google directions API and the polyline paths in the Rome2Rio Search API result.

以下php为地图写出了javascript:

The following php writes out the javascript for the map:

<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/

From my research, it seems that it is the javascript which is causing problems (possibly by escaping characters) but I cannot find a resolution. The code output by the php is here: http://jsfiddle.net/phily245/ebbCX/

推荐答案

编码的path中的反斜杠必须与另一个反斜杠一起转义:

The backslashes in the encoded path must be escaped with another backslash:

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

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

using json_encode should preserve the original string(assuming that the backslashes have been escaped in the original string):

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

这篇关于Google Maps编码折线渲染错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！