當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端的百度地图的api的使用

發(fā)布時間：2025/6/17 HTML 58 豆豆

生活随笔收集整理的這篇文章主要介紹了前端的百度地图的api的使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

　　1.打開百度地圖官方api網頁

　　http://lbsyun.baidu.com/

　　2.點擊開發(fā)文檔

?　　3.選擇對應的api

　　4.點擊DEMO詳情

　　5.得到源碼復制到你的代碼中

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 6 <style type="text/css"> 7 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";} 8 </style> 9 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script> 10 <title>地圖展示</title> 11 </head> 12 <body> 13 <div id="allmap"></div> 14 </body> 15 </html> 16 <script type="text/javascript"> 17 // 百度地圖API功能 18 var map = new BMap.Map("allmap"); // 創(chuàng)建Map實例 19 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設置中心點坐標和地圖級別 20 //添加地圖類型控件 21 map.addControl(new BMap.MapTypeControl({ 22 mapTypes:[ 23 BMAP_NORMAL_MAP, 24 BMAP_HYBRID_MAP 25 ]})); 26 map.setCurrentCity("北京"); // 設置地圖顯示的城市此項是必須設置的 27 map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放 28 </script>

　　6.在上列代碼行中第9行有ak密鑰需要自己獲取

　　http://lbsyun.baidu.com/apiconsole/key

　　7.根據官方教程提示進行操作

　　http://lbsyun.baidu.com/index.php?title=jspopular/qa

　　其中Refer白名單內容可以填寫自己本地ip地址也可以填寫服務器ip地址或域名。

　　8.把獲取到的ak密鑰更新到自己的代碼中去

轉載于:https://www.cnblogs.com/wmh1997/p/10821801.html