枯木逢春我逢您
1. <>
2. <head>
3. <meta http-equiv="Content-Type" content="text/; charset=utf-8" />
4. <title>Hello, World</title>
5. <script type="text/javascript" src="鏈接"></script>
6. </head>
7. <body>
8. <div id="container"></div>
9. </body>
10. </> 1
1. 1
2. <> <head> <meta http-equiv="Content-Type" content="text/; charset=utf-8" /> <title>Hello, World</title> <script type="text/javascript" src="鏈接"></script> </head> <body> <div id="container"></div> </body> </>
1. <script type="text/javascript">
2. var map = new BMap.Map("container"); // 創建地圖實例
3. var nt = new BMap.Point(11
6.404, 3
9.915); // 創建點坐標
4. map.centerAndZoom(nt, 15); // 初始化地圖,設置中心點坐標和地圖級別
5. </script>
6. <script type="text/javascript"> var map = new BMap.Map("container"); // 創建地圖實例 var nt = new BMap.Point(11
6.404, 3
9.915); // 創建點坐標 map.centerAndZoom(nt, 15); // 初始化地圖,設置中心點坐標和地圖級別 </script> 引用地圖API文件 當您引用地圖API文件時,需要使用自己申請的API密鑰。
1. <script type="text/javascript" src="鏈接"></script> <script type="text/javascript" src="鏈接"></script> 創建地圖容器元素
1. <div id="container"></div> <div id="container"></div> 地圖需要一個HTML元素作為容器,這樣才能展現到頁面上。這里我們創建了一個div元素并制定它的大小。地圖會根據容器大小調整自身尺寸。 命名空間 API使用BMap作為命名空間,所有類均在該命名空間之下,比如:BMap.Map、BMap.Control、BMap.Overlay。 創建地圖實例
1. var map = new BMap.Map("container"); var map = new BMap.Map("container"); 位于BMap命名空間下的Map類表示地圖,通過new操作符可以創建一個地圖實例。其參數可以是元素id也可以是元素對象。 注意在調用此構造函數時應確保容器元素已經添加到地圖上。 創建點坐標
1. var nt = new BMap.Point(11
6.404, 3
9.915); var nt = new BMap.Point(11
6.404, 3
9.915); 這里我們使用BMap命名空間下的Point類來創建一個坐標點。Point類描述了一個地理坐標點,其中11
6.404表示經度,3
9.915表示緯度。 地圖初始化
1. map.centerAndZoom(nt,15); map.centerAndZoom(nt,15); 在創建地圖實例后,我們需要對其進行初始化,BMap.Map.centerAndZoom()方法要求設置中心點坐標和地圖級別。 地圖必須經過初始化才可以執行其他操作。 地圖操作 地圖被實例化并完成初始化以后,就可以與其進行交互了。API中的地圖對象的外觀與行為與地圖網站上交互的地圖非常相似。它支持鼠標拖拽、滾輪縮放、雙擊放大等交互功能。您也可以修改配置來改變這些功能。 您還可以通過編程的方式與地圖交互。Map類提供了若干修改地圖狀態的方法。例如:setCenter()、panTo()、zoomTo()等等。 下面示例顯示一個地圖,等待兩秒鐘后,它會移動到新中心點。panTo()方法將讓地圖平滑移動至新中心點,如果移動距離超過了當前地圖區域大小,則地圖會直跳到該點。
1. var map = new BMap.Map("container");
2. var nt = new BMap.Point(11
6.404, 3
9.915);
3. map.centerAndZoom(nt, 15);
4. window.setTimeout(function(){
5. map.panTo(new BMap.Point(11
6.409, 3
9.918));
6. }, 2000); var map = new BMap.Map("container"); var nt = new BMap.Point(11
6.404, 3
9.915); map.centerAndZoom(nt, 15); window.setTimeout(function(){ map.panTo(new BMap.Point(11
6.409, 3
9.918)); }, 2000); 原文:鏈接
?﹏?
2021-09-23 17:41:06 1165查看 1回答
Wendydydydy
2021-09-23 17:42:09 532查看 1回答
錦色
2021-09-23 17:42:33 627查看 2回答
2021-09-23 17:42:33 507查看 2回答
此生
2021-09-23 17:47:03 512查看 3回答
奕奕
2021-09-23 17:47:07 522查看 2回答
milusky
2021-09-23 17:51:43 778查看 1回答
邢小二
2021-09-23 17:53:57 523查看 2回答
李鯉
2021-09-23 17:53:57 606查看 1回答