我在谷歌地图上为我的宇宙呈现折线有问题。结果应该看起来像http://goo.gl/U18jBJ上的折线(谷歌地图从利兹到伦敦的路线)。
我正在呈现来自Google directions API的每个步骤的单个路径,而不是仅仅获取Google directions地图,这样我就可以使用循环来呈现来自Google directions API的每个步骤的单个路径和Rome2Rio Search API结果中的折线路径。
下面的php为地图写了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/
已编码的path
中的反斜杠必须用另一个反斜杠转义:
json_encode
的应该保留原始字符串(假设反斜杠在原始字符串中已经转义):
echo 'var routePath'.$segementCounter.' = '.json_encode($segment->path).';';