百度地图API接口以及Jquery遮罩层

CI大菜鸟 · 发表于 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>


<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=OBLSUAgGSdRgxqaiY0PbouDc"></script>





<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)

Aloghli · 发表于 2015-3-2 17:59:46

		自动登录	找回密码
密码			入住 CI 中国社区

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

评分

相关帖子

浏览过的版块