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

<?php
$this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data);
$this->headTitle('高级搜索');
$this->headTitle()->setSeparator(' - ');
$this->breadcrumb('<a href="/">首页</a>');
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
$this->breadcrumb('高级搜索');
$this->breadcrumb()->setSeparator(' > ');
$this->theme->AppendPlus($this,'tianditu');
$this->theme->AppendPlus($this,'jquery_ui');
?>
<div>
<?= $this->partial('data/tools.phtml'); ?>
</div>
<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>时间范围</legend>
   <label>开始时间<input name="begin" type="text" id="begin"  value="<?php echo $this->begin; ?>"/></label>
   <label>结束时间<input name="end" type="text" id="end" value="<?php echo $this->end; ?>" /></label>
   </fieldset>
   <fieldset><legend>空间范围</legend>
    <label>东<input name="east" id="east" type="text" value="<?php echo $this->east; ?>"/></label>
    <label>南<input name="south" id="south" type="text" value="<?php echo $this->south; ?>" /></label>
    <label>西<input name="west" id="west" type="text" value="<?php echo $this->west; ?>" /></label>
    <label>北<input name="north" id="north" type="text" value="<?php echo $this->north; ?>" /></label>
   </fieldset>
   <label>关键词<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>搜索</button>
  </form>
 </div>
</div>

<script type="text/javascript"> 
$(function() {
  //jquery ui datepicker
  $("#begin").datepicker({dateFormat:"yy-mm-dd"});
  $("#end").datepicker({dateFormat:"yy-mm-dd"});
});
var bounds = null;
var rect = null;
var map,zoom=6,rectTool;
var input = {east:'#east',west:'#west',north:'#north',south:'#south'};

//加载地图
var myLatlng = new TLngLat(97,38);
map = new TMap("map_canvas");
map.centerAndZoom(myLatlng,zoom);
map.enableHandleMouseScroll();
var config = {
          type:"TMAP_NAVIGATION_CONTROL_LARGE",   //缩放平移的显示类型
          anchor:"TMAP_ANCHOR_TOP_LEFT",          //缩放平移控件显示的位置
          offset:[0,0],                           //缩放平移控件的偏移值
          showZoomInfo:true                       //是否显示级别提示信息，true表示显示，false表示隐藏。
       };
//创建缩放平移控件对象
var control=new TNavigationControl(config);
//添加缩放平移控件
map.addControl(control);
control = new TMapTypeControl();
//将地图类型控件添加到地图上
map.addControl(control); 

var config = {
            strokeColor:"#000000",  //折线颜色
            fillColor:"#FFFFFF",    //填充颜色。当参数为空时，折线覆盖物将没有填充效果
            strokeWeight:"2px", //折线的宽度，以像素为单位
            opacity:0.5,    //折线的透明度，取值范围0 - 1
            strokeStyle:"dashed" //折线的样式，solid或dashed
        };
//创建矩形工具对象
rectTool = new TRectTool(map,config);
//注册矩形工具绘制完成后的事件
TEvent.addListener(rectTool,"draw",onDrawRect);
rectTool.open();

function onDrawRect(bounds)
{
 map.clearOverLays();
 rect = new TRect(bounds);
 $(input.east).val(bounds.getNorthEast().getLng());
 $(input.north).val(bounds.getNorthEast().getLat());
 $(input.west).val(bounds.getSouthWest().getLng());
 $(input.south).val(bounds.getSouthWest().getLat());
 map.addOverLay(rect);
 //关闭矩形工具体
 //rectTool.close();
}

function InputValueChange(){
 if(MapInputValueCheck() == true)
 {
  map.clearOverLays();
  rect = new TRect(new TBounds($(input.west).val(),$(input.south).val(),$(input.east).val(),$(input.north).val()));
  map.addOverLay(rect);
  var p1=new TLngLat($(input.west).val(),$(input.south).val());
  var p2=new TLngLat($(input.west).val(),$(input.north).val());
  var p3=new TLngLat($(input.east).val(),$(input.north).val());
  var p4=new TLngLat($(input.east).val(),$(input.south).val());
  map.setViewport(new Array(p1,p2,p3,p4));
 }
}

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);

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