です。 写真のようにチェックボックスにユーザーがクリックするとき、私はマップ(AJAX)をリフレッシュしたいと思います:<a href="http://www.yiiframework.com/" rel="nofollow noreferrer">Yii framework</a>とYii <a href="http://www.yiiframework.com/extension/egmap" rel="nofollow noreferrer">egmap extension</a>を使用してインタラクティブマップを作成しています.YYとEGMapの拡張機能(Googleマップ)の更新マップは
:
<?php
Yii::app()->clientScript->registerScript('filterscript',"
$('#filter_all').click(function() {
$(\"input[name='filter\[\]']\").prop('checked', this.checked);
window.location.href = 'http://' + window.location.host + window.location.pathname + '?tags=sale,rent,residential,commercial,agricultural';
});
$(\"input[name='filter\[\]']\").click(function() {
var tags = '?tags=';
var tmp=new Array();
$('#filter_all').prop('checked', !$(\"input[name='filter\[\]']:not(:checked)\").length);
$('input[type=checkbox]').each(function() {
if (this.checked)
tmp.push($(this).val());
});
tags += tmp.join(',');
window.location.href = 'http://' + window.location.host + window.location.pathname + tags;
});
$('#filter_all').prop('checked', !$(\"input[name='filter\[\]']:not(:checked)\").length);
",CClientScript::POS_READY);
?>
そしてマップは、このコードでEGMap拡張子を使用して生成されます。
<?php
// Get latlong from location-aware web browser saved in cookie
if (isset($_COOKIE['latlng'])){
list($lat,$long) = explode(',',htmlentities(htmlspecialchars(strip_tags($_COOKIE['latlng']))));
}else{
$lat = 3.159553312559541;
$long = 101.71481802016604;
}
Yii::import('ext.gmap.*');
$gMap = new EGMap();
$gMap->setJsName('map');
$gMap->zoom = 10;
$mapTypeControlOptions = array(
'sensor'=>true,
'position'=> EGMapControlPosition::LEFT_BOTTOM,
'style'=>EGMap::MAPTYPECONTROL_STYLE_DROPDOWN_MENU
);
$gMap->mapTypeControlOptions= $mapTypeControlOptions;
$gMap->setWidth('100%');
$gMap->setHeight(500);
$gMap->setCenter($lat, $long);
$icon = new EGMapMarkerImage("http://".$_SERVER['HTTP_HOST'].Yii::app()->baseUrl."/images/bighouse.png");
$icon->setSize(32, 37);
$icon->setAnchor(16, 16.5);
$icon->setOrigin(0, 0);
// Status label
$status_type = array(
0=>'success',
1=>'warning',
2=>'important',
3=>'important',
);
$condition = '';
$sale_cond = '';
$rent_cond = '';
if ($match['sale']==='' && $match['rent']==='' && $match['residential']==='' && $match['commercial']==='' && $match['agricultural']===''){
$condition = "AND (
(MATCH (tags) AGAINST ('sale')
AND MATCH (tags) AGAINST ('residential'))
OR
(MATCH (tags) AGAINST ('rent')
AND MATCH (tags) AGAINST ('residential'))
OR
(MATCH (tags) AGAINST ('sale')
AND MATCH (tags) AGAINST ('commercial'))
OR
(MATCH (tags) AGAINST ('rent')
AND MATCH (tags) AGAINST ('commercial'))
OR
(MATCH (tags) AGAINST ('sale')
AND MATCH (tags) AGAINST ('agricultural'))
OR
(MATCH (tags) AGAINST ('rent')
AND MATCH (tags) AGAINST ('agricultural'))
)";
}else{
if ($match['sale']!=''){
$sale_cond = "MATCH (tags) AGAINST ('sale')";
if ($match['residential']!=''){
$cond[1] = "(".$sale_cond." AND MATCH (tags) AGAINST ('residential'))";
}
if ($match['commercial']!=''){
$cond[2] = "(".$sale_cond." AND MATCH (tags) AGAINST ('commercial'))";
}
if ($match['agricultural']!=''){
$cond[3] = "(".$sale_cond." AND MATCH (tags) AGAINST ('agricultural'))";
}
if ($match['residential']!='' || $match['commercial']!='' || $match['agricultural']!=''){
$sale_cond = implode(' OR ', $cond);
}
}
if ($match['rent']!=''){
$rent_cond = "MATCH (tags) AGAINST ('rent')";
if ($match['residential']!=''){
$cond[1] = "(".$rent_cond." AND MATCH (tags) AGAINST ('residential'))";
}
if ($match['commercial']!=''){
$cond[2] = "(".$rent_cond." AND MATCH (tags) AGAINST ('commercial'))";
}
if ($match['agricultural']!=''){
$cond[3] = "(".$rent_cond." AND MATCH (tags) AGAINST ('agricultural'))";
}
if ($match['residential']!='' || $match['commercial']!='' || $match['agricultural']!=''){
$rent_cond = implode(' OR ', $cond);
}
}
if ($sale_cond!=''){
$condition = 'AND '.$sale_cond;
if ($rent_cond!=''){
$condition .= ' OR '.$rent_cond;
}
}elseif ($rent_cond!=''){
$condition = 'AND '.$rent_cond;
}
}
$props = Property::model()->findAll('active=1 '.$condition);
if ($props!==null){
foreach ($props as $prop){
// Prepare status label for info box
$status_label='<span class="label label-'.$status_type[(int)$prop['status']].'">'.$list_status[(int)$prop['status']].'</span>';
$prop_photo = '';
$win_height = '110px';
// Check if photo exist
if (is_file('images/property/'.$prop['photo'])){
$prop_photo = '<img src="http://'.$_SERVER['HTTP_HOST'].Yii::app()->baseUrl.'/images/property/'.$prop['photo'].'" /><br />';
$win_height = '310px';
}
$email_img = '<img src="http://'.$_SERVER['HTTP_HOST'].Yii::app()->baseUrl.'/site/strtoimg?pid='.$prop['id'].'" />';
$view_link = '<div style="float:left"><a href="'.Yii::app()->baseUrl.'/public/view/'.$prop['id'].'">View this property</a></div>';
$edit_link = '';
if (!Yii::app()->user->isGuest && (int)$prop['user_id']===(int)Yii::app()->user->id){
$edit_link = '<div style="float:right"><a href="'.Yii::app()->baseUrl.'/prop/update/'.$prop['id'].'">Edit this property</a></div>';
}
$links = '<div>'.$view_link.' '.$edit_link.'</div>';
$info_window = new EGMapInfoWindow('<div style="height:'.$win_height.'">'.
$prop_photo.
substr($prop['description'],0,40).'...'.'<br />'.
'Price: '.$prop['price'].'<br />'.
'Email: '.$email_img.'<br />'.
'Tel: '.$prop['contact_phone'].'<br />'.
$status_label.' Added: '.$prop['date_upload'].'<br />'.
$links.
'</div>');
$marker = new EGMapMarker($prop['latitude'], $prop['longitude'], array('title' => $prop['title'],'icon'=>$icon));
$marker->addHtmlInfoWindow($info_window);
$gMap->addMarker($marker);
}
}
$gMap->renderMap();
?>
これらのすべてのコードはビューファイルです。マップは、idがEGMapContainer0
のhtml要素のEGMap拡張によって生成されます。任意のアイデアどのようにチェックボックスのクリックのイベントでは、ajaxを介して地図をリフレッシュを達成するために?
ありがとうございました。
あなたの答えをありがとう。 renderPartialは実際にはビューファイルにまっすぐには使用しません。 DOMの準備ができたら、EGMapContainer0を何とか操作することはできないでしょうか? –
私はあなたがそれを試して、あなたの所見を与えてくれると言っています。 –