百度地圖api如何使用
如果想用百度地圖api，首先需要先獲取一個(gè)百度地圖api的密鑰，然后引入百度地圖的api，接下來，我們?cè)敿?xì)介紹下獲取、引入api密鑰的技巧，以及通過代碼給大家詳解下百度地圖api如何使用，具體請(qǐng)看下文。
首先 ，如果想調(diào)用百度地圖api，你需要獲取一個(gè)百度地圖api的密鑰。
申請(qǐng)密鑰很簡單，在百度地圖api的首頁就有相關(guān)鏈接，填寫相關(guān)信息百度就會(huì)給你一個(gè)密鑰了。
接下來，就是引入百度地圖的api
關(guān)鍵代碼如下：
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=yourkey&v=2.0&services=false"></script>
接下來我們就可以創(chuàng)建一個(gè)地圖試試看了。（Js代碼）
var map = new BMap.Map("container"); // 創(chuàng)建地圖實(shí)例
var point = new BMap.Point(120.391655,36.067588); // 創(chuàng)建點(diǎn)坐標(biāo)
map.centerAndZoom(point, 15);
//map.centerAndZoom("北京", 15);
//map.centerAndZoom("Hongkong", 15);
這里需要說明三點(diǎn):
1.map.centerAndZoom方法創(chuàng)建地圖，第一個(gè)參數(shù)可以是根據(jù)之前創(chuàng)建好的一個(gè)點(diǎn)為中心，創(chuàng)建出地圖，也可以根據(jù)城市地區(qū)的中文名稱創(chuàng)建地圖。（如果拼寫正確，可以根據(jù)城市的英文名稱來創(chuàng)建）
2. map.centerAndZoom第二個(gè)參數(shù)是地圖縮放級(jí)別，最大為19，最小為0。（但實(shí)際當(dāng)縮小到3的時(shí)候就已經(jīng)。。。）
3.BMap.Map方法創(chuàng)建地圖時(shí)候需要一個(gè)容器(地圖會(huì)根據(jù)容器的大小自動(dòng)進(jìn)行調(diào)整。)，填寫相關(guān)容器的id。
關(guān)于地圖大?。?/strong>
可以通過
map.setZoom();
方法主動(dòng)控制地圖大小級(jí)別。
也可以通過設(shè)置
map.enableScrollWheelZoom(true);
利用鼠標(biāo)滾輪控制大小。
百度地圖提供了非常豐富的功能空間共我們使用。
1.Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實(shí)現(xiàn)自定義控件。
2.NavigationControl：地圖平移縮放控件，PC端默認(rèn)位于地圖左上方，它包含控制地圖的平移和縮放的功能。移動(dòng)端提供縮放控件，默認(rèn)位于地圖右下方。
3.OverviewMapControl：縮略地圖控件，默認(rèn)位于地圖右下方，是一個(gè)可折疊的縮略地圖。
4.ScaleControl：比例尺控件，默認(rèn)位于地圖左下方，顯示地圖的比例關(guān)系。
5.MapTypeControl：地圖類型控件，默認(rèn)位于地圖右上方(地圖，衛(wèi)星，三維)。
6.CopyrightControl：版權(quán)控件，默認(rèn)位于地圖左下方。
7.GeolocationControl：定位控件，針對(duì)移動(dòng)端開發(fā)，默認(rèn)位于地圖左下方。
效果圖
map.addControl(new BMap.NavigationControl());//縮放平移控件
map.addControl(new BMap.ScaleControl()); //比例尺
map.addControl(new BMap.OverviewMapControl());//縮略圖
map.addControl(new BMap.MapTypeControl()); //地圖類型
map.setCurrentCity("青島");
注意：當(dāng)設(shè)置城市信息時(shí)，MapTypeControl的切換功能才能可用
地圖事件：
百度地圖API中的大部分對(duì)象都含有addEventListener方法，我們可以通過該方法來監(jiān)聽對(duì)象事件。
實(shí)例：
map.addEventListener("click", function(){
alert("您點(diǎn)擊了地圖。");
});
當(dāng)我們不再希望監(jiān)聽事件時(shí)，可以將事件監(jiān)聽進(jìn)行移除。每個(gè)API對(duì)象提供了removeEventListener用來移除事件監(jiān)聽函數(shù)。
map.removeEventListener("click", functionA);
map.addEventListener("click", functionA);
地圖遮蓋物:
Overlay：覆蓋物的抽象基類，所有的覆蓋物均繼承此類的方法。
Marker：標(biāo)注表示地圖上的點(diǎn)，可自定義標(biāo)注的圖標(biāo)。
Label：表示地圖上的文本標(biāo)注，您可以自定義標(biāo)注的文本內(nèi)容。
Polyline：表示地圖上的折線。
Polygon：表示地圖上的多邊形。多邊形類似于閉合的折線，另外您也可以為其添加填充顏色。
Circle: 表示地圖上的圓。
InfoWindow：信息窗口也是一種特殊的覆蓋物，它可以展示更為豐富的文字和多媒體信息。注意：同一時(shí)刻只能有一個(gè)信息窗口在地圖上打開。
標(biāo)注示例：
var point = new BMap.Point(120.389472,36.072362);//默認(rèn) 可以通過Icon類來指定自定義圖標(biāo)
var marker = new BMap.Marker(point);
var label = new BMap.Label("青島市政府",{offset:new BMap.Size(20,-10)});//標(biāo)注標(biāo)簽
marker.setLabel(label)//設(shè)置標(biāo)注說明
marker.enableDragging();//標(biāo)注可以拖動(dòng)的
marker.addEventListener("dragend", function(e){
alert(e.point.lng + ", " + e.point.lat);//打印拖動(dòng)結(jié)束坐標(biāo)
});
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;'>詳細(xì)信息</p>"); //彈出窗口
marker2.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
});
以上說明就是本文的全部內(nèi)容，希望對(duì)大家使用百度地圖api有所幫助。
相關(guān)文章
javascript 三種數(shù)組復(fù)制方法的性能對(duì)比
javascript 三種數(shù)組復(fù)制方法的性能對(duì)比,對(duì)于webkit, 使用concat; 其他瀏覽器, 使用slice.2010-01-01
JavaScript用document.write()輸出換行的示例代碼
這篇文章主要介紹了JavaScript用document.write()輸出換行的示例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11
談?wù)劵趇frame、FormData、FileReader三種無刷新上傳文件的方法
發(fā)請(qǐng)求有兩種方式，一種是用ajax，另一種是用form提交，默認(rèn)的form提交如果不做處理的話，會(huì)使頁面重定向。本篇文章通過實(shí)例給大家介紹基于iframe/FormData/FileReader三種無刷新上傳文件的方法，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要為大家詳細(xì)介紹了小程序自定義圓形進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章介紹了javascript中類型判斷的最佳方式，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn)
“繼承”是面向?qū)ο缶幊汤锩娼?jīng)常提及到的概念，它的目的是實(shí)現(xiàn)代碼復(fù)用。這篇文章主要介紹了聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn)，有興趣的可以了解一下。2017-04-04
Three.js GLTF模型加載實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了Three.js GLTF模型加載實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
JS+JSP checkBox 全選具體實(shí)現(xiàn)
本文為大家介紹下使用JS+JSP實(shí)現(xiàn)checkBox全選，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2014-01-01
同一個(gè)網(wǎng)頁中實(shí)現(xiàn)多個(gè)JavaScript特效的方法
這篇文章主要介紹了同一個(gè)網(wǎng)頁中實(shí)現(xiàn)多個(gè)JavaScript特效的方法,實(shí)例分析了多個(gè)特效的實(shí)現(xiàn)原理與相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要給大家介紹了關(guān)于微信小程序中實(shí)現(xiàn)微信支付的相關(guān)資料,微信小程序支付是一種常見的支付方式,實(shí)現(xiàn)起來相對(duì)較為復(fù)雜,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11