詳解Javascript百度地圖接口開(kāi)發(fā)文檔中的類(lèi)和方法
JavaScript API v2.0介紹
百度地圖JavaScript API是一套由JavaScript語(yǔ)言編寫(xiě)的應(yīng)用程序接口，它能夠幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強(qiáng)的地圖應(yīng)用，包含了構(gòu)建地圖基本功能的各種接口，提供了諸如本地搜索、路線規(guī)劃等數(shù)據(jù)服務(wù)。
該套API免費(fèi)對(duì)外開(kāi)放。自v1.5版本起，您需先申請(qǐng)密鑰（ak）才可使用，接口（除發(fā)送短信功能外）無(wú)使用次數(shù)限制。
JavaScript API首家支持Https，如需要申請(qǐng)Https服務(wù)，請(qǐng)您認(rèn)證企業(yè)信息，成為企業(yè)認(rèn)證用戶后，https將自動(dòng)開(kāi)通，同時(shí)獲得更高的服務(wù)配額。
注意：僅JavaScript API
V2.0版本支持https，其他JavaScript API版本均不支持。使用https服務(wù)，請(qǐng)先檢查您的版本以及配置注意事項(xiàng)。
調(diào)用API的基本文件格式
獲取JavaScript API服務(wù)方法:
自JS APIv1.5之后，最新版本為2.0，您需要首先申請(qǐng)密鑰（ak），才可成功加載API JS文件。
ak的使用方法如下：
<script src="http://api.map.baidu.com/api?v=2.0&ak"您的密鑰" type="text/javascript">
其中參數(shù)v為API當(dāng)前的版本號(hào)，目前最新版本為2.0。在1.2版本之前您還可以設(shè)置services參數(shù)，以告知API是否加載服務(wù)部分，true表示加載，false表示不加載，默認(rèn)為true。。
創(chuàng)建地圖實(shí)例
var map = new
BMap.Map("container");
//創(chuàng)建點(diǎn)坐標(biāo)
var point = newBMap.Point(104.045,30.559);
//地圖初始化
map.centerAndZoom(point,15);
百度地圖控件
向地圖添加控件:
map.addControl(newBMap.NavigationControl());
//控件位置:
var opts = {offset: newBMap.Size(150, 5)}
map.addControl(newBMap.ScaleControl(opts));
//修改控件配置:
var opts = {type:BMAP_NAVIGATION_CONTROL_SMALL}
map.addControl(newBMap.NavigationControl(opts));
地圖覆蓋物
所有疊加或覆蓋到地圖的內(nèi)容，我們統(tǒng)稱(chēng)為地圖覆蓋物。如標(biāo)注、矢量圖形元素(包括：折線和多邊形和圓)、信息窗口等。覆蓋物擁有自己的地理坐標(biāo)，當(dāng)您拖動(dòng)或縮放地圖時(shí)，它們會(huì)相應(yīng)的移動(dòng)。
可以使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物，注意此方法不適用于InfoWindow。
//創(chuàng)建標(biāo)注: var marker = newBMap.Marker(new BMap.Point(104.045,30.559)); //將標(biāo)注添加到地圖中: map.addOverlay(marker);
地圖信息窗口提示
信息窗口在地圖上方的浮動(dòng)顯示HTML內(nèi)容。信息窗口可直接在地圖上的任意位置打開(kāi)，也可以在標(biāo)注對(duì)象上打開(kāi)（此時(shí)信息窗口的坐標(biāo)與標(biāo)注的坐標(biāo)一致）。您可以使用InfoWindow來(lái)創(chuàng)建一個(gè)信息窗實(shí)例，注意同一時(shí)刻地圖上只能有一個(gè)信息窗口處于打開(kāi)狀態(tài)。
var opts = {
width : 250,//信息窗口寬度
height: 100,//信息窗口高度
title : "Hello"http://信息窗口標(biāo)題
}
var infoWindow = newBMap.InfoWindow("World", opts);//創(chuàng)建信息窗口對(duì)象
map.openInfoWindow(infoWindow,map.getCenter());//打開(kāi)信息窗口
地圖信息窗口提示(事件觸發(fā)顯示)
事件方法與Map事件機(jī)制相同?？蓞⒖际录糠?/p>
監(jiān)聽(tīng)標(biāo)注事件:
marker.addEventListener("click",function(){
alert("您點(diǎn)擊了標(biāo)注");
});
給標(biāo)注添加點(diǎn)擊事件:
marker.addEventListener("click",function(){
map.openInfoWindow(infoWindow,map.getCenter());
});
定位(瀏覽器定位)
Geolocation地圖定位,返回用戶當(dāng)前的位置。此方法利用瀏覽器的geolocation接口獲取用戶當(dāng)前位置，不支持的瀏覽器將無(wú)法獲取。
創(chuàng)建Geolocation對(duì)象實(shí)例:
var geolocation = newBMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){ //判斷狀態(tài)
var mk = new BMap.Marker(r.point);//創(chuàng)建一個(gè)地圖標(biāo)注
map.addOverlay(mk);
map.panTo(r.point);//轉(zhuǎn)向獲取的地理坐標(biāo)所在位置
alert('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
})
定位(IP定位)
LocalCity此類(lèi)用于獲取用戶所在的城市位置信息。(根據(jù)用戶IP自動(dòng)定位到城市)
創(chuàng)建LocalCity對(duì)象實(shí)例:
myCity = new BMap.LocalCity();
myCity.get(function(e){
map.setCenter(e.name);
alert(e.name);
});
定位(經(jīng)緯度定位)
點(diǎn)擊獲取經(jīng)緯度實(shí)例:
map.addEventListener("click",function(e){
alert(e.point.lng + "," + e.point.lat);
});
根據(jù)經(jīng)緯度定位實(shí)例:
var new_point = new BMap.Point(116.299689,40.1196618); var marker = newBMap.Marker(new_point);//創(chuàng)建標(biāo)注 map.addOverlay(marker);//將標(biāo)注添加到地圖中 map.panTo(new_point);
地址解析
var myGeo = newBMap.Geocoder();//創(chuàng)建地址解析器實(shí)例
//將地址解析結(jié)果顯示在地圖上,并調(diào)整地圖視野
myGeo.getPoint("北京市昌平區(qū)回龍觀地鐵站", function(point){
if (point) {
map.centerAndZoom(point, 15);
map.addOverlay(new BMap.Marker(point)); //在地圖上標(biāo)注地理位置
}else{
alert("您選擇地址沒(méi)有解析到結(jié)果!");
}
}, "北京市");
逆地址解析
Geocoder類(lèi)用于獲取用戶的地址解析
var geoc = newBMap.Geocoder();
map.addEventListener("click",function(e){
var pt = e.point; //點(diǎn)擊位置的坐標(biāo)點(diǎn)
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " +addComp.city + ", " + addComp.district + ", " +addComp.street + ", " + addComp.streetNumber);
});
步行規(guī)劃
WalkingRoute用于獲取步行路線規(guī)劃方案。創(chuàng)建一個(gè)步行導(dǎo)航實(shí)例。location表示檢索區(qū)域，類(lèi)型可為地圖實(shí)例、坐標(biāo)點(diǎn)或城市名稱(chēng)的字符串。當(dāng)參數(shù)為地圖實(shí)例時(shí)，檢索位置由當(dāng)前地圖中心點(diǎn)確定；當(dāng)參數(shù)為坐標(biāo)時(shí)，檢索位置由該點(diǎn)所在位置確定；當(dāng)參數(shù)為城市名稱(chēng)時(shí)，檢索會(huì)在該城市內(nèi)進(jìn)行。
步行規(guī)劃實(shí)例:
var walking = newBMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
walking.search("天壇公園", "故宮");
獲取步行導(dǎo)航的結(jié)果顯示實(shí)例:
var walking = newBMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});
walking.search("天壇公園", "故宮");
駕車(chē)規(guī)劃
DrivingRoute此類(lèi)用于獲取駕車(chē)路線規(guī)劃方案
駕車(chē)線路規(guī)劃實(shí)例:
var driving = newBMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});
driving.search("女子醫(yī)院", "王府井廣場(chǎng)");
公交檢索
TransitRoute用于獲取公交路線規(guī)劃方案
公交檢索實(shí)例:
var transit = newBMap.TransitRoute(map, {renderOptions: {map: map, panel:"r-result"}});
transit.search("中醫(yī)大省醫(yī)院", "明宇金融廣場(chǎng)");
信息檢索
LocalSearch用于位置檢索、周邊檢索和范圍檢索
關(guān)鍵字檢索實(shí)例:
var local = new BMap.LocalSearch(map,{
renderOptions:{map: map}
});
local.search("景點(diǎn)");
本地檢索結(jié)果實(shí)例:
var local = newBMap.LocalSearch(map, {
renderOptions: {map: map, panel: "r-result"}
});
local.search("餐飲");
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。
- JavaScript實(shí)現(xiàn)經(jīng)緯度轉(zhuǎn)換成地址功能
- 用NodeJS實(shí)現(xiàn)批量查詢(xún)地理位置的經(jīng)緯度接口
- 基于JavaScript實(shí)現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經(jīng)緯度坐標(biāo)
- 根據(jù)經(jīng)緯度計(jì)算地球上兩點(diǎn)之間的距離js實(shí)現(xiàn)代碼
- JS開(kāi)發(fā)中百度地圖+城市聯(lián)動(dòng)實(shí)現(xiàn)實(shí)時(shí)觸發(fā)查詢(xún)地址功能
- JS百度地圖搜索懸浮窗功能
- js實(shí)現(xiàn)百度地圖定位于地址逆解析，顯示自己當(dāng)前的地理位置
- js實(shí)現(xiàn)百度地圖同時(shí)顯示多個(gè)路書(shū)效果
- JS代碼實(shí)現(xiàn)百度地圖 畫(huà)圓 刪除標(biāo)注
- 最全面的百度地圖JavaScript離線版開(kāi)發(fā)
- JS實(shí)現(xiàn)根據(jù)詳細(xì)地址獲取經(jīng)緯度功能示例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)消滅星星案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
最全面的百度地圖JavaScript離線版開(kāi)發(fā)
最全面的百度地圖JavaScript離線版開(kāi)發(fā),這篇文章主要為大家詳細(xì)介紹了JavaScript離線版開(kāi)發(fā)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript實(shí)現(xiàn)獲取網(wǎng)絡(luò)通信進(jìn)度
這篇文章主要為大家詳細(xì)介紹了如何使用Fetch?API和XMLHttpRequest（XHR）來(lái)執(zhí)行網(wǎng)絡(luò)請(qǐng)求,并重點(diǎn)說(shuō)明如何獲取這兩種方法的網(wǎng)絡(luò)請(qǐng)求進(jìn)度,感興趣的可以了解下2023-12-12
選項(xiàng)卡的實(shí)現(xiàn)方法比較多，但原理基本上都差不多，隱藏與顯示輪換2009-04-04
js實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出為EXCEL（支持大量數(shù)據(jù)導(dǎo)出）
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出為EXCEL，支持大量數(shù)據(jù)導(dǎo)出，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript中forEach和map的使用場(chǎng)景
本文JavaScript中forEach和map的使用場(chǎng)景，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
IE與Firefox在JavaScript上的7個(gè)不同句法分享
盡管那需要用長(zhǎng)串的、沉悶的不同分支代碼來(lái)應(yīng)付不同瀏覽器的日子已經(jīng)過(guò)去，偶爾還是有必要做一些簡(jiǎn)單的區(qū)分和目標(biāo)檢測(cè)來(lái)確保某塊代碼能在用戶的機(jī)器上正常運(yùn)行2011-10-10
JS圖片定時(shí)翻滾效果實(shí)現(xiàn)方法
這篇文章主要介紹了JS圖片定時(shí)翻滾效果實(shí)現(xiàn)方法,涉及javascript結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
Firefox 包含了一個(gè)非標(biāo)準(zhǔn)的 JavaScript 擴(kuò)展，使正則像函數(shù)一樣可調(diào)用。2008-04-04
如何使用proxy實(shí)現(xiàn)一個(gè)簡(jiǎn)單完整的MVVM庫(kù)的示例代碼
這篇文章主要介紹了如何使用proxy實(shí)現(xiàn)一個(gè)簡(jiǎn)單完整的MVVM庫(kù)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09