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');
$this->headLink()->appendStylesheet('/static-sanji-v2/css/dataProduct.css');
$this->headLink()->appendStylesheet('/static-sanji-v2/css/header-position.css');
?>

<!--搜索框-->
<div class="searchBox searchBox2">
    <div class="container">
        <div class="col-sm-12">
            <div class="form-group">
                <form action="/search" id="search-form">
                    <input type="text" name="q" id="q" class="form-control" placeholder="搜素关键词">
                </form>
            </div>
            <i onclick="$('#search-form').submit()"></i>
        </div>
    </div>
</div>
<!--固定搜索框-->
<div class="searchBox searchBox1">
    <div class="container">
        <div class="col-sm-12">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="搜素关键词">
            </div>
            <i></i>
        </div>
    </div>
</div>
<div class="searchOne">
    <div class="container">
        <div class="col-lg-12">
            <?= $this->partial('data/tools.phtml'); ?>
        </div>
    </div>
</div>

<div class="container">
    <div class="col-lg-12">
        <div class="col-md-8" id="map_canvas" style="height:500px;"></div>
        <div class="col-md-4">
            <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>
</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(100, 38);
    var config = {projection: "EPSG:4326"}
    map = new TMap("map_canvas", config);
    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);

    //创建矩形工具对象
    rectTool = new TRectTool(map);
    //注册矩形工具绘制完成后的事件
    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();
            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));

            var west = parseFloat($(input.west).val());
            var east = parseFloat($(input.east).val());
            var north = parseFloat($(input.north).val());
            var south = parseFloat($(input.south).val());
            var bounds = new TBounds(west, south, east, north);
            rect = new TRect(bounds);
            map.addOverLay(rect);
        }
    }

    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>