JavaScript API v2.0介紹
“只有客戶發(fā)展了,才有我們的生存與發(fā)展!”這是成都創(chuàng)新互聯(lián)的服務(wù)宗旨!把網(wǎng)站當(dāng)作互聯(lián)網(wǎng)產(chǎn)品,產(chǎn)品思維更注重全局思維、需求分析和迭代思維,在網(wǎng)站建設(shè)中就是為了建設(shè)一個不僅審美在線,而且實用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對做網(wǎng)站、成都網(wǎng)站設(shè)計、網(wǎng)站制作、網(wǎng)站開發(fā)、網(wǎng)頁設(shè)計、網(wǎng)站優(yōu)化、網(wǎng)絡(luò)推廣、探索永無止境。
百度地圖JavaScript API是一套由JavaScript語言編寫的應(yīng)用程序接口,它能夠幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強(qiáng)的地圖應(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的使用方法如下:
其中參數(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事件機(jī)制相同。可參考事件部分
監(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í)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。