2015年1月22日 星期四

使用百度地圖API

做網站要內嵌地圖時,因為google地圖在國內會被牆,所以申請了百度地圖的api

http://developer.baidu.com/map/
web開發=> javascript大眾版 => 示例Demo =>逆/地址解析 => 地址解析 (選這個才能輸入地址去定位)
直接的demo連結:
http://developer.baidu.com/map/jsdemo.htm#i7_1

接著要弄到ak key
( 弄到ak key之前要申請成為百度開發者,註冊流程會導到輕應用 http://qing.baidu.com/console# 這邊,ak key不是在這邊拿到的請注意 )

取得ak key
http://lbsyun.baidu.com/apiconsole/key
創建應用 => 應用類型選瀏覽器 => IP白名单打 "*"

然後就能複製代碼在本機測試了
代碼:
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的ak_key" type="text/javascript"></script>
<div id="allmap">
</div>
<script type="text/javascript">
 // 百度地图API功能
 var map = new BMap.Map("allmap");
 var point = new BMap.Point(116.331398,39.897445);
 map.centerAndZoom(point,12);
 // 创建地址解析器实例
 var myGeo = new BMap.Geocoder();
 // 将地址解析结果显示在地图上,并调整地图视野
 myGeo.getPoint("你的地址", function(point){
  if (point) {
   map.centerAndZoom(point, 16);
   map.addOverlay(new BMap.Marker(point));
  }
 }, "你的城市");
</script>

自己寫css調整地圖大小:
#allmap { width: 100px; height: 100px; }

实现多点标注及显示提示信息 (全國經銷商圖)
使用百度地圖工具產生
http://api.map.baidu.com/lbsapi/creatmap/
如果要看全中國地圖,定位中心点 => 当前城市 =>搜尋"全國"
添加标注 => 可以選擇標注的樣式、地點、說明(甚至你做出來後可以添加圖片, 如 http://blog.csdn.net/u013310075/article/details/24435869 上修改一些js可以辦到 )

如果要放在google blogger上,因為會被blogger的css影響到,要調一下CSS:
#dituContent #platform img { padding: 0; background: transparent; } /* #dituContent 是 百度地图容器 的div id*/
padding: 0; => 取消地圖上的白邊
background: transparent; => 讓標駐點陰影透明

實例:

同一個網頁有兩張地圖
百度地圖API不支援同一頁有兩個地圖,另一張可使用騰訊地圖 ( http://api.map.soso.com/doc/ )

參考資料:
http://blog.csdn.net/u013310075/article/details/24435869 百度地图之调用javaScript api接口实现多点标注及显示提示信息 (較舊)
http://api.map.baidu.com/lbsapi/creatmap/ 百度地圖API工具

沒有留言:

張貼留言