溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

詳解Javascript百度地圖接口開發(fā)文檔中的類和方法

發(fā)布時間：2020-09-30 12:54:38 來源：腳本之家 閱讀：163 作者：ydxred 欄目：web開發(fā)

JavaScript API v2.0介紹

百度地圖JavaScript API是一套由JavaScript語言編寫的應(yīng)用程序接口，它能夠幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強的地圖應(yīng)用，包含了構(gòu)建地圖基本功能的各種接口，提供了諸如本地搜索、路線規(guī)劃等數(shù)據(jù)服務(wù)。

該套API免費對外開放。自v1.5版本起，您需先申請密鑰（ak）才可使用，接口（除發(fā)送短信功能外）無使用次數(shù)限制。

JavaScript API首家支持Https，如需要申請Https服務(wù)，請您認(rèn)證企業(yè)信息，成為企業(yè)認(rèn)證用戶后，https將自動開通，同時獲得更高的服務(wù)配額。

注意：僅JavaScript API

V2.0版本支持https，其他JavaScript API版本均不支持。使用https服務(wù)，請先檢查您的版本以及配置注意事項。

調(diào)用API的基本文件格式

獲取JavaScript API服務(wù)方法:

自JS APIv1.5之后，最新版本為2.0，您需要首先申請密鑰（ak），才可成功加載API JS文件。

ak的使用方法如下：

<script src="http://api.map.baidu.com/api?v=2.0&ak"您的密鑰" type="text/javascript">

其中參數(shù)v為API當(dāng)前的版本號，目前最新版本為2.0。在1.2版本之前您還可以設(shè)置services參數(shù)，以告知API是否加載服務(wù)部分，true表示加載，false表示不加載，默認(rèn)為true。。

創(chuàng)建地圖實例

var map = new

BMap.Map("container");

//創(chuàng)建點坐標(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)稱為地圖覆蓋物。如標(biāo)注、矢量圖形元素(包括：折線和多邊形和圓)、信息窗口等。覆蓋物擁有自己的地理坐標(biāo)，當(dāng)您拖動或縮放地圖時，它們會相應(yī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);

地圖信息窗口提示

信息窗口在地圖上方的浮動顯示HTML內(nèi)容。信息窗口可直接在地圖上的任意位置打開，也可以在標(biāo)注對象上打開（此時信息窗口的坐標(biāo)與標(biāo)注的坐標(biāo)一致）。您可以使用InfoWindow來創(chuàng)建一個信息窗實例，注意同一時刻地圖上只能有一個信息窗口處于打開狀態(tài)。

var opts = {

width : 250,//信息窗口寬度

height: 100,//信息窗口高度

title : "Hello"http://信息窗口標(biāo)題

}

var infoWindow = newBMap.InfoWindow("World", opts);//創(chuàng)建信息窗口對象

map.openInfoWindow(infoWindow,map.getCenter());//打開信息窗口

地圖信息窗口提示(事件觸發(fā)顯示)

事件方法與Map事件機制相同。可參考事件部分

監(jiān)聽標(biāo)注事件:

marker.addEventListener("click",function(){

alert("您點擊了標(biāo)注");

});

給標(biāo)注添加點擊事件:

marker.addEventListener("click",function(){

map.openInfoWindow(infoWindow,map.getCenter());

});

定位(瀏覽器定位)

Geolocation地圖定位,返回用戶當(dāng)前的位置。此方法利用瀏覽器的geolocation接口獲取用戶當(dāng)前位置，不支持的瀏覽器將無法獲取。

創(chuàng)建Geolocation對象實例:

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)建一個地圖標(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此類用于獲取用戶所在的城市位置信息。(根據(jù)用戶IP自動定位到城市)

創(chuàng)建LocalCity對象實例:

myCity = new BMap.LocalCity();

myCity.get(function(e){

map.setCenter(e.name);

alert(e.name);

});

定位(經(jīng)緯度定位)

點擊獲取經(jīng)緯度實例:

map.addEventListener("click",function(e){

alert(e.point.lng + "," + e.point.lat);

});

根據(jù)經(jīng)緯度定位實例:

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)建地址解析器實例

//將地址解析結(jié)果顯示在地圖上,并調(diào)整地圖視野

myGeo.getPoint("北京市昌平區(qū)回龍觀地鐵站", function(point){

if (point) {

map.centerAndZoom(point, 15);

map.addOverlay(new BMap.Marker(point)); //在地圖上標(biāo)注地理位置

}else{

alert("您選擇地址沒有解析到結(jié)果!");

}

}, "北京市");

逆地址解析

Geocoder類用于獲取用戶的地址解析

var geoc = newBMap.Geocoder();

map.addEventListener("click",function(e){

var pt = e.point; //點擊位置的坐標(biāo)點

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)建一個步行導(dǎo)航實例。location表示檢索區(qū)域，類型可為地圖實例、坐標(biāo)點或城市名稱的字符串。當(dāng)參數(shù)為地圖實例時，檢索位置由當(dāng)前地圖中心點確定；當(dāng)參數(shù)為坐標(biāo)時，檢索位置由該點所在位置確定；當(dāng)參數(shù)為城市名稱時，檢索會在該城市內(nèi)進(jìn)行。

步行規(guī)劃實例:

var walking = newBMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});

walking.search("天壇公園", "故宮");

獲取步行導(dǎo)航的結(jié)果顯示實例:

var walking = newBMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});

walking.search("天壇公園", "故宮");

駕車規(guī)劃

DrivingRoute此類用于獲取駕車路線規(guī)劃方案

駕車線路規(guī)劃實例:

var driving = newBMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});

driving.search("女子醫(yī)院", "王府井廣場");

公交檢索

TransitRoute用于獲取公交路線規(guī)劃方案

公交檢索實例:

var transit = newBMap.TransitRoute(map, {renderOptions: {map: map, panel:"r-result"}});

transit.search("中醫(yī)大省醫(yī)院", "明宇金融廣場");

信息檢索

LocalSearch用于位置檢索、周邊檢索和范圍檢索

關(guān)鍵字檢索實例:

var local = new BMap.LocalSearch(map,{

renderOptions:{map: map}

});

local.search("景點");

本地檢索結(jié)果實例:

var local = newBMap.LocalSearch(map, {

renderOptions: {map: map, panel: "r-result"}

});

local.search("餐飲");

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手