[英]PHP, Javascript & Twig Temaples
I have this code to show points on a google map which I just can't quite get to work when I pass the information from my PHP to my Twig template. 我有这段代码可以在Google地图上显示点,但是当我将信息从PHP传递到Twig模板时,这些点还是无法发挥作用。 However it works just fine with an array directly in the javascript.
但是,它可以直接在javascript中与数组一起工作。 Please can somewhere spare my hair pulling and help me out.
请可以在某处省掉我的头发拉扯并帮助我。
PHP code: PHP代码:
// Create a list of items return from SQL
foreach ($mapdetails as $mapdetail){
if($locations!='') $locations.=',';
$locations.='[
"'.$mapdetail['venue'].'"
,"'.$mapdetail['lat'].'"
,"'.$mapdetail['lng'].'"
]';
}
// set template variables & render template
echo $template->render(array (
'pageTitle' => 'Map Locations',
'locations' => $locations
));
echoing $locations returns this: [ "Venue 1","53.301624" ,"-1.923434" ],[ "Venue 2" ,"53.160526" ,"-1.996968" ] echo $ locations返回以下内容:[“ Venue 1”,“ 53.301624”,“-1.923434”],[“ Venue 2”,“ 53.160526”,“-1.996968”]
JAVASCRIPT SNIPPET: JAVASCRIPT片段:
When I use this line in the template it doesn't work 当我在模板中使用此行时,它不起作用
var all = '[{{locations|json_encode()|raw}}]';
When I use this line it does work 当我使用此行时,它确实起作用
var all = [[ "Venue 1" ,"53.301624" ,"-1.923434" ],[ "Venue 2","53.160526" ,"-1.996968"]];
FULL JAVASCRIPT 完整的脚本
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
// Set the Map variable
var map;
function initialize(){
var myOptions ={
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
THIS DOESN'T WORK When replaced with the below line it does 这不起作用用以下行替换时,它会起作用
var all = '[{{locations|json_encode()|raw}}]';
THIS DOES WORK 这是可行的
var all = [[ "Venue 1" ,"53.301624" ,"-1.923434" ],[ "Venue 2","53.160526" ,"-1.996968"]];
console.log(all);
var infoWindow = new google.maps.InfoWindow;
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
// Set the center of the map
var pos = new google.maps.LatLng(53.25,-1.91);
map.setCenter(pos);
function infoCallback(infowindow, marker) {
return function() {
infowindow.open(map, marker);
};
}
function setMarkers(map, all) {
for (var i in all) {
var venue = all[i][0];
var lat = all[i][1];
var lng = all[i][2];
var latlngset;
latlngset = new google.maps.LatLng(lat, lng);
console.log(venue);
console.log(lat);
var marker = new google.maps.Marker({
map: map, title: city, position: latlngset
});
var content = '';
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(content);
google.maps.event.addListener(
marker,
'click',
infoCallback(infowindow, marker)
);
}
}
// Set all markers in the all variable
setMarkers(map, all);
};
// Initializes the Google Map
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="height: 500px; width: 800px;"></div>
</body>
</html>
Any help please.... 任何帮助请...
The problem is that you're creating a PHP string: 问题在于您正在创建一个PHP字符串:
'[ "Venue 1","53.301624" ,"-1.923434" ],[ "Venue 2" ,"53.160526" ,"-1.996968" ]'
which you are the json_encoding (with added quotes and stuff to boot): 您是json_encoding(带有引号和要引导的内容):
var all = '[{{locations|json_encode()|raw}}]';
The result of which is something like this, which is a messed up Javascript string and not an object: 结果是这样的,这是一个混乱的Javascript字符串,而不是对象:
var all = '["[ \"Venue 1\",\"53.301624\"..."]';
That's nowhere close to what you want. 那离您想要的还很遥远。 You simply want to have a PHP array which you then json_encode:
您只想拥有一个PHP数组 ,然后使用json_encode:
$locations = array_map(function (array $mapdetail) {
return array($mapdetail['venue'], $mapdetail['lat'], $mapdetail['lng']);
}, $mapdetails);
In the template: 在模板中:
var all = {{ locations|json_encode|raw }};
The result looks like: 结果如下:
var all = [["Venue 1","53.301624","-1.923434" ],["Venue 2","53.160526","-1.996968"]];
which is a Javascript array of arrays. 这是一个Javascript数组数组。 It's that simple.
就这么简单。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.