網頁中嵌入百度地圖

不久前作了一個項目，客戶說要在網頁中添加該公司在百度地圖上的位置，因而就在網上找。百度公司提供了具體的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>