天天看點

百度地圖-建立檢索資訊視窗對象

<%@ page language="java" contentType="text/html; charset=UTF-8" deferredSyntaxAllowedAsLiteral="true"%>
<%@ include file="/jsp/include/taglib.jsp"%>

<!DOCTYPE 
    html
    PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>商家小區地圖</title>
<link href="/style/default/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery/jquery.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GxNhfawaxLTS1MBYVkdxm7KI"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

<link href="/js/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox.pack.js"></script>
</head>

<body>
    <c:set var="className" value="shopclass" />
    <%@include file="/jsp/layout/header.jsp"%>

    <div class="office-main clearfix">
        <c:set var="leftCss" value="css4" />
        <%@include file="/jsp/layout/left.jsp"%>

        <div class="content">
            <div class="content-top clearfix">
                <div class="bread-crumb">
                    商家小區地圖
                    <p class="content-copyright">版面号:${verNO}</p>
                </div>

                <div>
                    <div id="allmap" style="height: 600px;width:100%;"></div>
                    <div id="result" style="width:100%;font-size:12px;"></div>

                    <input type="hidden" id="communitysSize" value="${communitys.size()}"/>
                    <c:forEach items="${communitys }" var="communitys" varStatus="status">
                        <input type="hidden" id="longitude${status.index }" value="${communitys.longitude}"/>
                        <input type="hidden" id="latitude${status.index }" value="${communitys.latitude}" />
                        <input type="hidden" id="name${status.index }" value="${communitys.name}" />
                        <input type="hidden" id="address${status.index }" value="${communitys.address}" />
                    </c:forEach>
                </div>

            </div>
        </div>
    </div>

    <%@ include file="/jsp/layout/footer.jsp"%>

    <script type="text/javascript">
        // 百度地圖API功能
        var searchInfoWindow=[];
        var marker=[];
        var map = new BMap.Map('allmap');
        for(var i=;i<$("#communitysSize").val();i++){
            //擷取小區坐标,名稱和位址
            var longitude = $("#longitude"+i).val();
            var latitude = $("#latitude"+i).val();
            var name=$("#name"+i).val();
            var address=$("#address"+i).val();

            //坐标正确 把坐标加入到map中
            if (longitude.length >  && latitude.length > ) {
                lng = parseFloat(longitude);
                lat = parseFloat(latitude);
            }
            var poi = new BMap.Point(lng, lat);
            map.centerAndZoom(poi, );//設定地圖的比例
            map.enableScrollWheelZoom();//啟動滑鼠縮放

            //放大縮小元件
            var navigationControl = new BMap.NavigationControl({
                anchor : BMAP_ANCHOR_TOP_LEFT,
                type : BMAP_NAVIGATION_CONTROL_LARGE,
                enableGeolocation : true
            });
            map.addControl(navigationControl);

            var content = '<div style="margin:0;line-height:20px;padding:2px;">小區位址:'+address+'</div>';

            //建立檢索資訊視窗對象
            searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, content, {
                    title  : "小區名稱:"+name,      //标題
                    width  : ,             //寬度
                    height : ,              //高度
                    panel  : "panel",         //檢索結果面闆
                    enableAutoPan : true,    //自動平移
                    searchTypes   :[
                        //BMAPLIB_TAB_SEARCH,   //周邊檢索
                        //BMAPLIB_TAB_TO_HERE,  //到這裡去
                        //BMAPLIB_TAB_FROM_HERE //從這裡出發
                    ]
                });
            marker[i] = new BMap.Marker(poi); //建立marker對象
            marker[i].enableDragging(); //marker可拖拽

            marker[i].addEventListener("mouseover", (function(i){return function(e){searchInfoWindow[i].open(marker[i]);} })(i));
            marker[i].addEventListener("mouseout", (function(i){return function(e){searchInfoWindow[i].close(marker[i]);} })(i));

            map.addOverlay(marker[i]); //在地圖中添加marker   
        }

       //定位中心
        var poi = new BMap.Point(parseFloat(),parseFloat());
        map.centerAndZoom(poi, );
    </script>

</body>
</html>
           

繼續閱讀