溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
JavaScript API v2.0介紹
百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口，它能夠幫助您在網站中構建功能豐富、交互性強的地圖應用，包含了構建地圖基本功能的各種接口，提供了諸如本地搜索、路線規劃等數據服務。
該套API免費對外開放。自v1.5版本起，您需先申請密鑰（ak）才可使用，接口（除發送短信功能外）無使用次數限制。
JavaScript API首家支持Https，如需要申請Https服務，請您認證企業信息，成為企業認證用戶后，https將自動開通，同時獲得更高的服務配額。
注意：僅JavaScript API
V2.0版本支持https，其他JavaScript API版本均不支持。使用https服務，請先檢查您的版本以及配置注意事項。
調用API的基本文件格式
獲取JavaScript API服務方法:
自JS APIv1.5之后，最新版本為2.0，您需要首先申請密鑰（ak），才可成功加載API JS文件。
ak的使用方法如下：
<script src="http://api.map.baidu.com/api?v=2.0&ak"您的密鑰" type="text/javascript">
其中參數v為API當前的版本號，目前最新版本為2.0。在1.2版本之前您還可以設置services參數，以告知API是否加載服務部分，true表示加載，false表示不加載，默認為true。。
創建地圖實例
var map = new
BMap.Map("container");
//創建點坐標
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));
地圖覆蓋物
所有疊加或覆蓋到地圖的內容，我們統稱為地圖覆蓋物。如標注、矢量圖形元素(包括：折線和多邊形和圓)、信息窗口等。覆蓋物擁有自己的地理坐標，當您拖動或縮放地圖時，它們會相應的移動。
可以使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物，注意此方法不適用于InfoWindow。
//創建標注: var marker = newBMap.Marker(new BMap.Point(104.045,30.559)); //將標注添加到地圖中: map.addOverlay(marker);
地圖信息窗口提示
信息窗口在地圖上方的浮動顯示HTML內容。信息窗口可直接在地圖上的任意位置打開，也可以在標注對象上打開（此時信息窗口的坐標與標注的坐標一致）。您可以使用InfoWindow來創建一個信息窗實例，注意同一時刻地圖上只能有一個信息窗口處于打開狀態。
var opts = {
width : 250,//信息窗口寬度
height: 100,//信息窗口高度
title : "Hello"http://信息窗口標題
}
var infoWindow = newBMap.InfoWindow("World", opts);//創建信息窗口對象
map.openInfoWindow(infoWindow,map.getCenter());//打開信息窗口
地圖信息窗口提示(事件觸發顯示)
事件方法與Map事件機制相同。可參考事件部分
監聽標注事件:
marker.addEventListener("click",function(){
alert("您點擊了標注");
});
給標注添加點擊事件:
marker.addEventListener("click",function(){
map.openInfoWindow(infoWindow,map.getCenter());
});
定位(瀏覽器定位)
Geolocation地圖定位,返回用戶當前的位置。此方法利用瀏覽器的geolocation接口獲取用戶當前位置，不支持的瀏覽器將無法獲取。
創建Geolocation對象實例:
var geolocation = newBMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){ //判斷狀態
var mk = new BMap.Marker(r.point);//創建一個地圖標注
map.addOverlay(mk);
map.panTo(r.point);//轉向獲取的地理坐標所在位置
alert('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
})
定位(IP定位)
LocalCity此類用于獲取用戶所在的城市位置信息。(根據用戶IP自動定位到城市)
創建LocalCity對象實例:
myCity = new BMap.LocalCity();
myCity.get(function(e){
map.setCenter(e.name);
alert(e.name);
});
定位(經緯度定位)
點擊獲取經緯度實例:
map.addEventListener("click",function(e){
alert(e.point.lng + "," + e.point.lat);
});
根據經緯度定位實例:
var new_point = new BMap.Point(116.299689,40.1196618); var marker = newBMap.Marker(new_point);//創建標注 map.addOverlay(marker);//將標注添加到地圖中 map.panTo(new_point);
地址解析
var myGeo = newBMap.Geocoder();//創建地址解析器實例
//將地址解析結果顯示在地圖上,并調整地圖視野
myGeo.getPoint("北京市昌平區回龍觀地鐵站", function(point){
if (point) {
map.centerAndZoom(point, 15);
map.addOverlay(new BMap.Marker(point)); //在地圖上標注地理位置
}else{
alert("您選擇地址沒有解析到結果!");
}
}, "北京市");
逆地址解析
Geocoder類用于獲取用戶的地址解析
var geoc = newBMap.Geocoder();
map.addEventListener("click",function(e){
var pt = e.point; //點擊位置的坐標點
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " +addComp.city + ", " + addComp.district + ", " +addComp.street + ", " + addComp.streetNumber);
});
步行規劃
WalkingRoute用于獲取步行路線規劃方案。創建一個步行導航實例。location表示檢索區域，類型可為地圖實例、坐標點或城市名稱的字符串。當參數為地圖實例時，檢索位置由當前地圖中心點確定；當參數為坐標時，檢索位置由該點所在位置確定；當參數為城市名稱時，檢索會在該城市內進行。
步行規劃實例:
var walking = newBMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
walking.search("天壇公園", "故宮");
獲取步行導航的結果顯示實例:
var walking = newBMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});
walking.search("天壇公園", "故宮");
駕車規劃
DrivingRoute此類用于獲取駕車路線規劃方案
駕車線路規劃實例:
var driving = newBMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});
driving.search("女子醫院", "王府井廣場");
公交檢索
TransitRoute用于獲取公交路線規劃方案
公交檢索實例:
var transit = newBMap.TransitRoute(map, {renderOptions: {map: map, panel:"r-result"}});
transit.search("中醫大省醫院", "明宇金融廣場");
信息檢索
LocalSearch用于位置檢索、周邊檢索和范圍檢索
關鍵字檢索實例:
var local = new BMap.LocalSearch(map,{
renderOptions:{map: map}
});
local.search("景點");
本地檢索結果實例:
var local = newBMap.LocalSearch(map, {
renderOptions: {map: map, panel: "r-result"}
});
local.search("餐飲");
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
