Zajmuję się interaktywną mapą przy użyciu Yii framework i Yii egmap extension. Chciałbym odświeżyć mapę (Ajax), gdy użytkownik kliknie na wyboru, jak pokazano na rysunku: jestem tylko w stanie zrobić to po stronie serwera (odświeżyć całą stronę) za pomocą następującego kodu:Rozszerzenie Yii i EGMap (Google Map) odśwież mapę na zmiany w polu wyboru
<?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);
?>
a mapa jest generowana poprzez rozszerzenie EGMap z tym kodem:
<?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();
?>
Wszystkie kody te są w pliku widoku. Mapa jest generowana przez rozszerzenie EGMap w elemencie HTML z identyfikatorem EGMapContainer0
. Każdy pomysł, jak uzyskać odświeżanie mapy za pomocą ajax w przypadku kliknięć pól wyboru?
Dzięki.
Dzięki za odpowiedź. W rzeczywistości nie używam renderPartial, tylko prosto do pliku widoku. Czy nie byłoby możliwe jakoś manipulować EGMapContainer0 po przygotowaniu DOM? –
Nie wykorzystałem, że możesz spróbować i proszę podać wyniki. –