用户
 找回密码
 入住 CI 中国社区
搜索
查看: 6867|回复: 1
收起左侧

[其它 Other] 百度地图API接口以及Jquery遮罩层

[复制链接]
发表于 2015-3-2 14:55:23 | 显示全部楼层 |阅读模式
本帖最后由 Closer 于 2015-3-2 15:00 编辑

自己做的练习,在此分享与记录,jquery不好可能有不完善的地方,可借以参考;以下是一个百度地图接口源代码,还有Jquery遮罩层,效果是当点击弹出地图后只有地图的内容可操作,外层失去效果,还有关闭窗

HTML:
HTML复制代码
<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>百度地图</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
 
<body>
    <div id="bgdiv"></div>
    <a  >公司名片</a>
    <button>显示</button>
   
    <div class="map">
        <div class="close" title="关闭" >
            <a href="#"></a>
        </div>
 
        <!-- 百度地图的容器 -->
        <div class="content" id="map">
           
        </div>        
    </div>
<!-- <div style="width:400px;height:300px;border:1px solid gray" id="container"</div>   -->
<!--引用百度地图API接口-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=OBLSUAgGSdRgxqaiY0PbouDc"></script>
 
<!-- 百度名片 -->
<!-- <iframe width="504" height="762" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://j.map.baidu.com/w_R-m"></iframe> -->
 
<!-- 引入JQ库 -->
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function(){
            $(".map a").click(function(){
                $(this).parents(".map").hide();//隐藏
                $("#bgdiv").removeAttr("style");//去掉css样式
            });
            $("button").click(function(){
                $(".map,#bgdiv").show();//显示
                                   
            });
        });
           
 
    </script>
<script type="text/javascript" src="js/map.js"></script>
</body>
</html>
复制代码



CSS:
CSS复制代码
        * {margin:0;padding: 0;}
#bgdiv {background-color:#e3e3e3; position:absolute;  left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5; z-index:1;}//z-index:属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。这是背景层
 
.map { width: 700px; height: 550px; margin: 60px 25% auto; display:none;    z-index:2;   position:fixed !important;}//地图层
.close { width: 700px; height: 25px; border:1px solid #E6E6E6; background: #fff; }
.map .close a { width: 16px; height: 16px; display:block; background: url("../images/ico-edit.png"); float: right;}
.map .close a:hover {background: url("../images/ico-del.png");}
.map .content { width: 700px; height: 515px;}
复制代码


.js百度地图API接口代码:
JS复制代码
/**
*显示地图的代码参数
*/

    //创建和初始化地图函数:
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){
      map = new BMap.Map("map");
      map.centerAndZoom(new BMap.Point(113.288609,23.217373),19);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
      var markers = [
        {content:"信息技术/信息技术/信息技术/",title:"浩龙信息技术有限公司",imageOffset: {width:0,height:3},position:{lat:23.217476,lng:113.288673}}
      ];
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
        })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
        marker.setLabel(label);
        addClickHandler(marker,infoWindow);
        map.addOverlay(marker);
      };
    }
    //向地图添加控件
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
      map.addControl(overviewControl);
    }
    var map;
      initMap();
 
          var map = new BMap.Map("container");  
    map.centerAndZoom(new BMap.Point(113.288609,23.217373),19);  
    map.enableScrollWheelZoom();  
    var marker=new BMap.Marker(new BMap.Point(113.288609,23.217373),19);  
    map.addOverlay(marker);  
    var licontent="<b>强盛商务大厦</b><br>";  
        licontent+="<span><strong>地址:</strong>广州市江夏北一路</span><br>";  
        licontent+="<span><strong>电话:</strong>(010)63095718,(010)63095630</span><br>";  
        licontent+="<span class=\"input\"><strong></strong><input class=\"outset\" type=\"text\" name=\"origin\" value=\"江夏站\"/><input class=\"outset-but\" type=\"button\" value=\"公交\" onclick=\"gotobaidu(1)\" /><input class=\"outset-but\" type=\"button\" value=\"驾车\"  onclick=\"gotobaidu(2)\"/><a class=\"gotob\" href=\"url=\"http://api.map.baidu.com/direction?destination=latlng:"+marker.getPosition().lat+","+marker.getPosition().lng+"|name:强盛商务大厦"+"®ion=广州"+"&output=html\" target=\"_blank\"></a></span>";
 
    var hiddeninput="<input type=\"hidden\" value=\""+'广州'+"\" name=\"region\" /><input type=\"hidden\" value=\"html\" name=\"output\" /><input type=\"hidden\" value=\"driving\" name=\"mode\" /><input type=\"hidden\" value=\"latlng:"+marker.getPosition().lat+","+marker.getPosition().lng+"|name:强盛商务大厦"+"\" name=\"destination\" />";
 
    var content1 ="<form id=\"gotobaiduform\" action=\"http://api.map.baidu.com/direction\" target=\"_blank\" method=\"get\">" + licontent +hiddeninput+"</form>";
   
    var opts1 = { width: 300 };  
       
    var  infoWindow = new BMap.InfoWindow(content1, opts1);  
    marker.openInfoWindow(infoWindow);  
    marker.addEventListener('click',function(){
        marker.openInfoWindow(infoWindow);
    });  
     
    function gotobaidu(type)  
    {  
        if($.trim($("input[name=origin]").val())=="")  
        {  
            alert("请输入起点!");  
            return;  
        }else{  
            if(type==1)  
            {  
                $("input[name=mode]").val("transit");  
                $("#gotobaiduform")[0].submit();  
            }else if(type==2)  
            {      
                $("input[name=mode]").val("driving");          
                $("#gotobaiduform")[0].submit();  
            }  
        }  
    }  
 
复制代码


Baidumap.rar (39.07 KB, 下载次数: 131)

评分

参与人数 1威望 +5 收起 理由
Hex + 5 很给力!

查看全部评分

本版积分规则