日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

百度地图api基本用法

發布時間:2023/12/16 编程问答 33 豆豆
生活随笔 收集整理的這篇文章主要介紹了 百度地图api基本用法 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文轉載自: https://www.cnblogs.com/yfsmooth/p/4695831.html 作者:yfsmooth 轉載請注明該聲明。

首先 ,如果想調用百度地圖api,你需要獲取一個百度地圖api的密鑰。

申請密鑰很簡單,在百度地圖api的首頁就有相關鏈接,填寫相關信息百度就會給你一個密鑰了。

接下來,就是引入百度地圖的api

關鍵代碼如下:

<script type="text/javascript" src="http://api.map.baidu.com/api?ak=yourkey&v=2.0&services=false"></script>

接下來我們就可以創建一個地圖試試看了。(Js代碼)

var map = new BMap.Map("container"); // 創建地圖實例 var point = new BMap.Point(120.391655,36.067588); // 創建點坐標 map.centerAndZoom(point, 15); //map.centerAndZoom("北京", 15); //map.centerAndZoom("Hongkong", 15);

這里需要說明三點:

1.map.centerAndZoom方法創建地圖,第一個參數可以是根據之前創建好的一個點為中心,創建出地圖,也可以根據城市地區的中文名稱創建地圖。(如果拼寫正確,可以根據城市的英文名稱來創建)

2.map.centerAndZoom第二個參數是地圖縮放級別,最大為19,最小為0。(但實際當縮小到3的時候就已經。。。)

3.BMap.Map方法創建地圖時候需要一個容器(地圖會根據容器的大小自動進行調整。),填寫相關容器的id。

?

關于地圖大小:

可以通過map.setZoom();方法主動控制地圖大小級別。

也可以通過設置map.enableScrollWheelZoom(true);利用鼠標滾輪控制大小。

?

百度地圖提供了非常豐富的功能空間共我們使用。

1.Control:控件的抽象基類,所有控件均繼承此類的方法、屬性。通過此類您可實現自定義控件。

2.NavigationControl:地圖平移縮放控件,PC端默認位于地圖左上方,它包含控制地圖的平移和縮放的功能。移動端提供縮放控件,默認位于地圖右下方。

3.OverviewMapControl:縮略地圖控件,默認位于地圖右下方,是一個可折疊的縮略地圖。

4.ScaleControl:比例尺控件,默認位于地圖左下方,顯示地圖的比例關系。

5.MapTypeControl:地圖類型控件,默認位于地圖右上方(地圖,衛星,三維)。

6.CopyrightControl:版權控件,默認位于地圖左下方。

7.GeolocationControl:定位控件,針對移動端開發,默認位于地圖左下方。

效果圖

map.addControl(new BMap.NavigationControl());//縮放平移控件 map.addControl(new BMap.ScaleControl()); //比例尺 map.addControl(new BMap.OverviewMapControl());//縮略圖 map.addControl(new BMap.MapTypeControl()); //地圖類型 map.setCurrentCity("青島"); 注意:當設置城市信息時,MapTypeControl的切換功能才能可用


地圖事件:
百度地圖API中的大部分對象都含有addEventListener方法,我們可以通過該方法來監聽對象事件。 實例:
map.addEventListener("click", function(){ alert("您點擊了地圖。"); });

當我們不再希望監聽事件時,可以將事件監聽進行移除。每個API對象提供了removeEventListener用來移除事件監聽函數。

map.removeEventListener("click", functionA); map.addEventListener("click", functionA);

?

地圖遮蓋物:

Overlay:覆蓋物的抽象基類,所有的覆蓋物均繼承此類的方法。

Marker:標注表示地圖上的點,可自定義標注的圖標。

Label:表示地圖上的文本標注,您可以自定義標注的文本內容。

Polyline:表示地圖上的折線。

Polygon:表示地圖上的多邊形。多邊形類似于閉合的折線,另外您也可以為其添加填充顏色。

Circle: 表示地圖上的圓。

InfoWindow:信息窗口也是一種特殊的覆蓋物,它可以展示更為豐富的文字和多媒體信息。注意:同一時刻只能有一個信息窗口在地圖上打開。

標注示例:

     var point = new BMap.Point(120.389472,36.072362);//默認 可以通過Icon類來指定自定義圖標var marker = new BMap.Marker(point);var label = new BMap.Label("青島市政府",{offset:new BMap.Size(20,-10)});//標注標簽 marker.setLabel(label)//設置標注說明marker.enableDragging();//標注可以拖動的marker.addEventListener("dragend", function(e){ alert(e.point.lng + ", " + e.point.lat);//打印拖動結束坐標 }); map.addOverlay(marker); var point = new BMap.Point(120.387244,36.064835);var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));var marker2 = new BMap.Marker(point, {icon: myIcon}); map.addOverlay(marker2);var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>詳細信息</p>"); //彈出窗口marker2.addEventListener("click", function(){this.openInfoWindow(infoWindow); });

?

總結

以上是生活随笔為你收集整理的百度地图api基本用法的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。