以下コードstationsの部分を動的に変化させたいのですが、SmartyテンプレートでPHP配列を受け取るにはどのように書けばいいでしょうか?
あと、地図のセンターを決める時複数マーカーの場合平均を取る方法はないのですか?
例では、固定値しか見つけられませんでした。
◆例えばPHP側
$stations(
[0] => ( [station] => 曙橋 [lat] => 35.692415 [lng] => 139.722900)
[1] => ( [station] => 新宿三丁目 [lat] => 35.690637 [lng] => 139.706281)
.....
)
$smarty->assign('stations', $stations);
◆テンプレート側
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$head_title} - {$sub_title}</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
{literal}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/googlemap.js"></script>
<script type="text/javascript">
$(function(){
var stations = [
['曙橋', 35.692415, 139.722900]
['新宿三丁目', 35.690637, 139.706281]
];
$('#googleMap').gmap(stations);
</script>
{/literal}
</head>
・PHP側
// javascript内で使用するため、デリミタを変更しています。 $smarty->left_delimiter = '<!--{'; $smarty->right_delimiter = '}-->'; $stations = array( 0 => array('station' => '曙橋', 'lat' => 35.692415, 'lng' => 139.722900), 1 => array('station' => '新宿三丁目', 'lat' => 35.690637, 'lng' => 139.706281) ); $smarty->assign('stations', $stations);
http://www.smarty.net/docsv2/ja/language.escaping.tpl
※デリミタの変更など共通する設定は、すべてのファイルに記述するのは面倒ですから、セットアップファイルに記述すると便利です。
http://www.smarty.net/docsv2/ja/installing.smarty.extended.tpl
・テンプレート側
<script type="text/javascript"> var stations = []; <!--{foreach from=$stations key=key item=item}--> stations[<!--{$key}-->] = ['<!--{$item['station']}-->', <!--{$item['lat']}-->, <!--{$item['lng']}-->] <!--{/foreach}--> // alert(stations); // 確認 $(function(){ $('#googleMap').gmap(stations); }); </script>
http://www.smarty.net/docsv2/ja/language.function.foreach.tpl
{literal}タグが展開されず、そのまま表示されますので使用しません。(代わりにデリミタを変更して対処しています。)
http://www.smarty.net/docsv2/ja/language.function.literal.tpl
{literal} タグに囲まれたデータのブロックは、 リテラルとして認識されます。これは一般的に、Javascript やスタイルシートなどで 中括弧がテンプレートの デリミタ として解釈されるとまずい場合に使用します。 {literal}{/literal} タブの内部は解釈されず、 そのままで表示されます。{literal} ブロック内にテンプレートタグを含める必要がある場合は、代わりに {ldelim}{rdelim} で個々のデリミタをエスケープしてください。
・複数マーカーの場合平均は、javascriptで計算した数値をcenterに渡すようにすれば大丈夫です。
var num = station.length; var lat = 0; var lng = 0; for (i in station) { lat += station[i][1]; lng += station[i][2]; } lat = lat / num; lng = lng / num;
※上記で算出されたlatおよびlngの値を「center: new google.maps.LatLng(lat, lng)」のように、centerに渡します。
※「station」は、「$('#googleMap').gmap(stations);」で実行している関数の引数です。
コメント(0件)