页面加载 Google Map

管理

<style>
    #menu {
        box-shadow: 2px 2px 1px #888888;
        position: absolute;
        height:750px;
        width:385px;
        padding:0px 0px;
        top:0px;
        right:0px;
        overflow: auto;
    }
    .menuIcon {
        padding:0px 0px;
        margin-top:0px;
        cursor:pointer;
        border-right: 0px dashed #888888;
        opacity: 0.90;
    }
    .alertHide {
        box-shadow: 2px 2px 1px #888888;
        position: absolute;
        height:750px;
        padding:0px 0px;
        top:0px;
        right:385px;
        overflow: auto;
        padding:0px 0px;
        cursor:pointer;
        border-right: 0px dashed #888888;
        opacity: 0.90;
        width:20px;
        margin-top:0px;
        font-size:16px;
        color:#1ab394;
    }

</style>

<script type="text/javascript">

    var nameVar = "${name}";

    $(document).ready(function() {

// $(“.menuIcon”).css(“display”,”none”); //$(“.alertHide”).css(“display”,”block”);

        if ($("#id").val() == '' || $("#id").val() == null) {
            document.getElementById('menu').style.display='inline';
        } else {
            document.getElementById('menu').style.display='none';
        }

        createMap("map_canvas",36.26613281490336,120.26979816083906);

        search();

    });

    function search(){
        $.ajax({
            url:"${ctx}/emer/step/search",
            cache:false,
            async:false,
            type:'post',
            data: {name:nameVar},
            success: function(result){
                $.each(result, function(i, item){
                    createMarker(item);
                });
            }
        });
    }

    var infowindow = new google.maps.InfoWindow({});
    function createMarker(item){

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(item.location.split(",")[0], item.location.split(",")[1]),
            map: map,
            icon:'/gtg/static/map/images/shigu.png',
            title: item.name
        });

        google.maps.event.addListener(marker, 'click', function() {

// infowindow.setContent(“ src='\"${ctx}/aaa/eport/reInfo?id="+item.id+"\"'>“);
// infowindow.open(map, marker);
showInfo(item);
});
}

    function showInfo(item){            
        parent.layer.open({
            type: 2,
            title: '地图选点',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['1300px', '650px'],
            content: '${ctx}/aaa/eport/reInfo?id='+item.id,
            btn: ['关闭'],
            cancel: function(index){
                }
        });
    }

    //重置
    function reset1(){
        $("#pageNo").val(0);
        $("#searchForm div.form-group input").val("");
        $("#searchForm div.form-group select").val("");
        $("#searchForm").submit();
            return false;
    }

    //显示隐藏检索框
    function showHideSearch(switcher){
        var div=document.getElementById('menu');

        if (div.style.display == "inline") {
            $(".menuIcon").css("display","none");
            $(".alertHide").css("display","block");
            $(".alertHide").css("right","0px");
            $(".alertHide").css("height","50px");
        } else {
            $(".menuIcon").css("display","inline");
            $(".alertHide").css("display","block");
            $(".alertHide").css("right","385px");
            $(".alertHide").css("height","750px");
        }
    }

</script>

<div id="map_canvas" style="width: 100%; height: 750px; margin: 0; padding: 0; position: absolute; z-index:-2;"></div>

<!--查询条件-->

<form:form id="searchForm" modelAttribute="eport" action="#" onsubmit="" method="post" class="">
    <input id="id" name="id" type="hidden" value="${eport.id}"/>

    <div class="form-group">
        <table class=""  >
           <tbody>
                <tr>
                    <td class="width-30 active"><label class="pull-right">名称：</label></td>
                    <td class="width-70">
                            <form:input path="name" htmlEscape="false" maxlength="64"  class=""/>
                    </td>
                </tr>
            </tbody>
        </table>
     </div>

     <div class="pull-right">
        <button  class="" onclick="search()" >查询</button>
        <button  class="" onclick="reset1()" >重置</button>
     </div>
</form:form>
<br/>
<br/>
<!-- 表格 -->
<table id="contentTable" class="">
    <thead>
        <tr>
            <th  class="">名称</th>
        </tr>
    </thead>
    <tbody>
    <c:forEach items="${page.list}" var="eport">
        <tr>
            <td><a  href="#" onclick="">
                ${eport.name}
            </a></td>
        </tr>
    </c:forEach>
    </tbody>
</table>

    <!-- 分页代码 -->
<table:page page="${page}"></table:page>


</div>
</div>