人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Smartyを経由しPHP5.2.17で作成した配列をJavaScriptへ渡す質問です。
以下コード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}&nbsp;-&nbsp;{$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>


●質問者: seadwell
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●100ポイント ベストアンサー

・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.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ