124 lines
4.7 KiB
PHTML
124 lines
4.7 KiB
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>
|