當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【JavaScript】百度地图API快速上手
生活随笔
收集整理的這篇文章主要介紹了
【JavaScript】百度地图API快速上手
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
獲取秘鑰
賬號和獲取秘鑰
很欣賞百度這個免費的feel，而且大家如果只是個人在本地的瀏覽器端運行網頁，做簡單的測試，基本是不受限的。
點擊“申請秘鑰”去申請秘鑰：
設置應用
接下來輸入應用名稱，基于自己的需要做一下設置：
復制秘鑰
可以復制秘鑰，后面用得到：
自動生成網頁源碼
自動生成調用百度地圖API的網頁代碼
復制HTML
注意圈紅圈的地方，要換成之前復制好的秘鑰：
運行網頁
網頁源碼
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="百度地圖,百度地圖API，百度地圖自定義工具，百度地圖所見即所得工具" /><meta name="description" content="百度地圖API自定義地圖，幫助用戶在可視化操作下生成百度地圖" /><title>百度地圖API自定義地圖</title><!--引用百度地圖API--><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘鑰"></script></head><body><!--百度地圖容器--><div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div><p style="color:red;font-weight:600">地圖生成工具基于百度地圖JS api v2.0版本開發，使用請申請密匙。<a href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank">了解如何申請密匙</a><a href="http://lbsyun.baidu.com/apiconsole/key?application=key" style="color:#2f83c7" target="_blank">申請密匙</a></p></body><script type="text/javascript">//創建和初始化地圖函數：function initMap(){createMap();//創建地圖setMapEvent();//設置地圖事件addMapControl();//向地圖添加控件addMapOverlay();//向地圖添加覆蓋物}function createMap(){ map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(116.447568,39.932153),12);}function setMapEvent(){map.enableScrollWheelZoom();map.enableKeyboard();map.enableDragging();map.enableDoubleClickZoom()}function addClickHandler(target,window){target.addEventListener("click",function(){target.openInfoWindow(window);});}function addMapOverlay(){}//向地圖添加控件function addMapControl(){var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});scaleControl.setUnit(BMAP_UNIT_IMPERIAL);map.addControl(scaleControl);var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(navControl);var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});map.addControl(overviewControl);}var map;initMap();</script> </html>深入研究
請閱讀百度地圖API官方文檔
總結
以上是生活随笔為你收集整理的【JavaScript】百度地图API快速上手的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 调用存储过程，名称，参数，类型都正确，但
- 下一篇： 【JSP】JSP的运行原理