网页中嵌入百度地图

不久前做了一个项目，客户说要在网页中添加该公司在百度地图上的位置，于是就在网上找。百度公司提供了具体的API，官网上也有具体的教程，很方便上手。这里简单的介绍在开发中的简单实例。

1.引入JavaScript API

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

//下面是SearchInfoWindow面板的js，以及css
<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" />

2.申请秘钥

http://developer.baidu.com/map/在官网中申请秘钥，把申请的秘钥添加到<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

3.添加地图

<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例 ，container为你所需要添加地图的div的id名
var point = new BMap.Point(114.192142235150,22.379458449680); // 创建点坐标 ，就是经纬度，可以通过GPS查询找到你想要的地址
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别

var marker = new BMap.Marker(point); //创建marker对象
marker.enableDragging(); //marker可拖拽
marker.addEventListener("click", function(e){
searchInfoWindow.open(marker);
})
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("广州");
map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
map.enableKeyboard();//启动键盘操作地图
map.addOverlay(marker); //在地图中添加marker
searchInfoWindow.open(marker); //在marker上打开检索信息串口
</script>