您的位置:首页 > 运维架构 > 网站架构

网站通用百度地图调用示例,只需填入座标和百度密钥即可。内容可自己更换。

2015-07-24 09:44 801 查看
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap {height:500px;width:100%;overflow: hidden; border:1px solid #ccc; margin:20px 0;}
#result {width:100%;font-size:12px;}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
dt{
font-size:14px;
font-family:"微软雅黑";
font-weight:bold;
border-bottom:1px dotted #000;
padding:5px 0 5px 5px;
margin:5px 0;
}
dd{
padding:5px 0 0 5px;
}
li{
line-height:28px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></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" />

<div id="allmap">
</div>

<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map('allmap');
var poi = new BMap.Point(114.041573,22.629422);
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();
var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
'<img src="images/map.png" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
'地址:XXXXX<br/>电话:XXXXX<br/>手机:XXX'
'</div>';

//创建检索信息窗口对象
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title  : "网站标题",      //标题
width  : 290,             //宽度
height : 105,              //高度
panel  : "panel",         //检索结果面板
enableAutoPan : true,     //自动平移
searchTypes   :[
BMAPLIB_TAB_SEARCH,   //周边检索
BMAPLIB_TAB_TO_HERE,  //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
var marker = new BMap.Marker(poi); //创建marker对象
marker.enableDragging(); //marker可拖拽
marker.addEventListener("click", function(e){
searchInfoWindow.open(marker);
})
map.addOverlay(marker); //在地图中添加marker
searchInfoWindow.open(marker);
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,    // LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
enableGeolocation: true
});
map.addControl(navigationControl);
</script>

<div class="clear"></div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  百度地图