自己根据百度地图api改写的地图源码 展示
1.效果图(补充:大小可以根据需求改最外面容器大小,宽度不是全屏平铺的时候要给固定宽度)
2.源码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中智河南百度地图</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#allmap {width:400px;height:500px;overflow: hidden;}
#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=PpQp4GA1HEAFU6Q4NR6soGlj0PhtmHKj"></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" />
<!-- v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的**" -->
</head>
<body>
<div id="allmap">
</div>
<div id="result">
</div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map('allmap');
var poi = new BMap.Point(113.776043,34.776235);
map.centerAndZoom(poi, 20);
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角,添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
//添加控件和比例尺
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.enableScrollWheelZoom();
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_SATELLITE_MAP
]
}
)); //添加地图类型控件
map.setMapType(BMAP_SATELLITE_MAP);
var content = '<div style="margin:0;line-height:20px;padding:2px;">' + '地铁一号线到东风南路站' +
'</div>';
//创建检索信息窗口对象
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title : "中智河南经济技术合作有限公司", //标题
width : 290, //宽度
height : 40, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
var marker = new BMap.Marker(poi); //创建marker对象
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker.enableDragging(); //marker可拖拽
searchInfoWindow.open(marker);
map.addOverlay(marker); //在地图中添加marker
var label = new BMap.Label("中智河南经济技术合作有限公司",{offset:new BMap.Size(20,10)});
marker.setLabel(label);
</script>
</body>
</html>