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

最新推荐文章于 2023-12-22 08:57:17 发布

阿磊_kb

最新推荐文章于 2023-12-22 08:57:17 发布

阅读量1.2k

点赞数

分类专栏：百度地图文章标签：百度地图创建检索信息窗口

本文链接：https://blog.youkuaiyun.com/luweihualulei/article/details/75647242

版权

百度地图专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何利用百度地图API创建和展示信息窗口，包括设置位置、内容以及交互功能，为用户提供地图上的信息提示服务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ 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>