westdc-zf1/application/default/views/scripts/search/advance.phtml

<?php
$this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data);
$this->headTitle('Advance Search');
if (!empty($this->codename)) $this->headTitle($this->codename);
$this->headTitle()->setSeparator(' - ');
$this->headLink()->appendStylesheet('/css/metadata.css');
$this->breadcrumb('<a href="/">Home</a>');
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
$this->breadcrumb('Advance Search');
$this->breadcrumb()->setSeparator(' > ');
$this->theme->AppendPlus($this,'google_map_v3');
$this->theme->AppendPlus($this,'google_map_keydragzone');
$this->theme->AppendPlus($this,'jquery_ui');
$this->theme->AppendPlus($this,'colorbox');
?>
<div>
<?= $this->partial('data/tools.phtml'); ?>
</div>
<?php if (!empty($this->metadata)) : 
 echo $this->page->getNavigation();?>
<hr />

<?php
foreach($this->metadata as $md) : ?>
<div class="mditem">
<div class="thumb"><img src="/service/thumb/id/<?php echo $md['id'];?>" /></div>    
    <h2><a href="/data/<?php echo $md['uuid'];?>"><?php echo $this->escape($md['title']);?></a>
            </h2>
    <span><?php echo mb_strlen($md['description'])>400?$this->escape(mb_substr($md['description'],0,400,'UTF-8').'...'):$this->escape($md['description']);?></span>
</div>
<?php endforeach; ?>
<?php echo $this->page->getNavigation();?>
<?php else: ?>

<div class="row">
    <div class="span8" id="map_canvas" style="height:500px;"></div>  
    <div class="span4">
        <form id="search" enctype="application/x-www-form-urlencoded" action="/search" method="get">
            <fieldset><legend>Temporal Range</legend>
            <label>
            	Start:
            	<input name="begin" type="text" id="begin"  value="<?php echo $this->begin; ?>"/>
            </label>
            <label>
            	End: 
            	<input name="end" type="text" id="end" value="<?php echo $this->end; ?>" />
            </label>
            </fieldset>
            <fieldset><legend>Spatial Range (Press shift key, drag a box in the map)</legend>
            <label>East
                <input name="east" id="east" type="text" value="<?php echo $this->east; ?>"/></label>
            <label>South
                <input name="south" id="south" type="text" value="<?php echo $this->south; ?>" /></label>
            <label>West
                <input name="west" id="west" type="text" value="<?php echo $this->west; ?>" /></label>
            <label>North
                <input name="north" id="north" type="text" value="<?php echo $this->north; ?>" /></label>
                </fieldset>
            <label>Keyword
            	<input name="q" id="q" type="text" value="<?php echo $this->q; ?>"/></label>
            <button id="search" class="btn btn-large btn-block btn-primary" type="submit" value="" onclick="dosubmit()" ><i class="icon-search"></i>Search</button>
        </form>
    </div>
</div>

<script type="text/javascript"> 
$(function() {
	//Google map (不启用预先加载)
	google.maps.event.addDomListener(window, 'load', initialize);
	//jquery ui datepicker
	$("#begin").datepicker({dateFormat:"yy-mm-dd"});
	$("#end").datepicker({dateFormat:"yy-mm-dd"});
});
// Google Map Part
var map = null;
var mapElementID = "map_canvas";
var bounds = null;
var rectangle = null;
var input = {east:'#east',west:'#west',north:'#north',south:'#south'};

function initialize() {
	//加载地图
	var myLatlng = new google.maps.LatLng(35.656456,105.819946);
	var myOptions = {
		zoom: 3,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById(mapElementID), myOptions);
	
	//Keydragzone
	map.enableKeyDragZoom({
	  key: "shift", 
	  boxStyle: {
		border: "1px dashed black",
		backgroundColor: "transparent",
		opacity: 1.0
	  },
	  veilStyle: {
		backgroundColor: "white",
		opacity: 0.35,
		cursor: "crosshair"
	  }
	});
	
	var dz = map.getDragZoomObject();
	google.maps.event.addListener(dz, 'dragstart', function (latlng) {
		RemoveRectangle();
		//console.dir(latlng);
	});
	google.maps.event.addListener(dz, 'dragend', function (latlng) {
		console.log(latlng);
		MapValueChange(latlng.fa.d,latlng.$.d,latlng.fa.b,latlng.$.b);
		setRectangle(latlng.fa.d,latlng.fa.b,latlng.$.b,latlng.$.d);
		//console.dir(latlng);
	});
	
	InputValueChange();

}

function setRectangle(east,west,south,north){
	
	bounds = new google.maps.LatLngBounds(
	  new google.maps.LatLng(south,west),
	  new google.maps.LatLng(north,east)
	);

	rectangle = new google.maps.Rectangle({
	  bounds: bounds,
	  editable: true
	});
	
	rectangle.setMap(map);
	
	google.maps.event.addListener(rectangle, 'bounds_changed', function () {
		var latlng = rectangle.getBounds();
		MapValueChange(latlng.fa.d,latlng.Z.d,latlng.fa.b,latlng.Z.b);
		//console.dir(latlng);
	});
	
}

function RemoveRectangle(){
	if(rectangle != null)
	{
		rectangle.setMap(null);
		rectangle = null;
	}
}

function MapValueChange(east,north,west,south){
	$(input.east).val(east);
	$(input.north).val(north);
	$(input.west).val(west);
	$(input.south).val(south);
}

function InputValueChange(){
	if(MapInputValueCheck() == true)
	{
		if(rectangle == null)
		{
			setRectangle($(input.east).val(),$(input.west).val(),$(input.south).val(),$(input.north).val());
		}else{
			var reSetBounds = new google.maps.LatLngBounds(
				new google.maps.LatLng($(input.south).val(),$(input.west).val()),
				new google.maps.LatLng($(input.north).val(),$(input.east).val())
			);
			rectangle.setBounds(reSetBounds);
		}
	}
}

function MapInputValueCheck()
{
	if($(input.east).val() != "" && $(input.west).val() != "" && $(input.north).val() != "" && $(input.south).val() != "")
	{
		return true;
	}else{
		return false;
	}
}

$(input.east).bind('blur',InputValueChange);
$(input.west).bind('blur',InputValueChange);
$(input.north).bind('blur',InputValueChange);
$(input.south).bind('blur',InputValueChange);

// Google map Part --End


function Alert(content){
	$.colorbox({innerWidth:'40%',html:'<div style="line-height:30px;font-size:16px;">'+ content +'</div>'});
}

function dosubmit() {
	theForm.action="/search";
}
</script> 
    


<?php endif; ?>