百度地图API —— Hello World！
2019獨角獸企業重金招聘Python工程師標準>>>
<!DOCTYPE?html>?? <html>?? <head>?? <meta?name="viewport"?content="initial-scale=1.0,?user-scalable=no"?/>?? <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>?? <title>Hello,?World</title>?? <style?type="text/css">?? html{height:100%}?? body{height:100%;margin:0px;padding:0px}?? #container{height:100%}?? </style>?? <script?type="text/javascript"?src="http://api.map.baidu.com/api?v=1.5&ak=您的密鑰"></script>//此為v1.5版本的引用方式?? </head>??<body>?? <div?id="container"></div> <script?type="text/javascript"> var?map?=?new?BMap.Map("container");??????????//?創建地圖實例?? var?point?=?new?BMap.Point(116.404,?39.915);??//?創建點坐標?? map.centerAndZoom(point,?15);?????????????????//?初始化地圖，設置中心點坐標和地圖級別?? </script>?? </body>?? </html>準備頁面
????根據HTML標準，每一份HTML文檔都應該聲明正確的文檔類型，我們建議您使用最新的符合HTML5規范的文檔聲明：
<!DOCTYPE?html>?
????您也可以根據需要選擇其他類型的文檔聲明，這樣瀏覽器會以標準的方式對頁面進行渲染，保證頁面最大的兼容性。我們不建議您使用quirks模式進行開發。
????下面我們添加一個meta標簽，以便使您的頁面更好的在移動平臺上展示。
<meta?name="viewport"?content="initial-scale=1.0,?user-scalable=no"?/>?
????接著我們設置樣式，使地圖充滿整個瀏覽器窗口：
<style?type="text/css">??html{height:100%}????body{height:100%;margin:0px;padding:0px}????#container{height:100%}???? </style>引用百度地圖API文件
創建地圖容器元素
地圖需要一個HTML元素作為容器，這樣才能展現到頁面上。這里我們創建了一個div元素。
命名空間 API使用BMap作為命名空間，所有類均在該命名空間之下，比如：BMap.Map、BMap.Control、BMap.Overlay。
創建地圖實例
????位于BMap命名空間下的Map類表示地圖，通過new操作符可以創建一個地圖實例。其參數可以是元素id也可以是元素對象。
????注意在調用此構造函數時應確保容器元素已經添加到地圖上。
創建點坐標
????這里我們使用BMap命名空間下的Point類來創建一個坐標點。Point類描述了一個地理坐標點，其中116.404表示經度，39.915表示緯度。
地圖初始化
在創建地圖實例后，我們需要對其進行初始化，BMap.Map.centerAndZoom()方法要求設置中心點坐標和地圖級別。 地圖必須經過初始化才可以執行其他操作。
地圖配置與操作
????地圖被實例化并完成初始化以后，就可以與其進行交互了。API中的地圖對象的外觀與行為與百度地圖網站上交互的地圖非常相似。它支持鼠標拖拽、滾輪縮放、雙擊放大等交互功能。您也可以修改配置來改變這些功能。 比如，默認情況下地圖不支持鼠標滾輪縮放操作，因為這樣可能會影響整個頁面的用戶體驗，但是如果您希望在地圖中使用鼠標滾輪控制縮放，則可以調用map.enableScrollWheelZoom方法來開啟。配置選項可以在Map類參考的配置方法一節中找到。
????此外，您還可以通過編程的方式與地圖交互。Map類提供了若干修改地圖狀態的方法。例如：setCenter()、panTo()、zoomTo()等等。
????下面示例顯示一個地圖，等待兩秒鐘后，它會移動到新中心點。panTo()方法將讓地圖平滑移動至新中心點，如果移動距離超過了當前地圖區域大小，則地圖會直跳到該點。
var?map?=?new?BMap.Map("container");???? var?point?=?new?BMap.Point(116.404,?39.915);???? map.centerAndZoom(point,?15);???? window.setTimeout(function(){??map.panTo(new?BMap.Point(116.409,?39.918));???? },?2000);轉載于:https://my.oschina.net/u/2255071/blog/375128
總結
以上是生活随笔為你收集整理的百度地图API —— Hello World！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 12864液晶显示实验
- 下一篇： LoadRunner常见问题整理