百度地图-创建检索信息窗口对象

来源：互联网发布：淘宝商品质量问题定义编辑：程序博客网时间：2024/06/05 04:54
<%@ 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=0;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 > 0 && latitude.length > 0) {                lng = parseFloat(longitude);                lat = parseFloat(latitude);            }            var poi = new BMap.Point(lng, lat);            map.centerAndZoom(poi, 13);//设置地图的比例            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  : 200,             //宽度                    height : 50,              //高度                    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(104.072222),parseFloat(30.663469));        map.centerAndZoom(poi, 13);    </script></body></html>
阅读全文
0 0