JavaScript API GL
百度地圖JavaScript API是一套由JavaScript語(yǔ)言編寫的應(yīng)用程序接口，可幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強(qiáng)的地圖應(yīng)用，支持PC端和移動(dòng)端基于瀏覽器的地圖應(yīng)用開發(fā)，且支持HTML5特性的地圖開發(fā)。
一、申請(qǐng)秘鑰
在控制臺(tái)里選擇創(chuàng)建應(yīng)用
選擇瀏覽器端,白名單輸入*
Hello World
我們直接把文檔內(nèi)的代碼cv過(guò)來(lái),加上秘鑰就可以直接使用地圖了
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Map </title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=******"></script>
<script>
var map = new BMapGL.Map("container"); // 創(chuàng)建地圖實(shí)例
var point = new BMapGL.Point(116.404, 39.915); // 創(chuàng)建點(diǎn)坐標(biāo)
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
</script>
</html>
顯示地址案例
我們向地圖添加標(biāo)注點(diǎn)和信息窗口
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Map </title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=*****"></script>
<script>
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 創(chuàng)建標(biāo)注
marker.enableDragging();
marker.addEventListener("dragend", function(e){
alert("當(dāng)前位置：" + e.point.lng + ", " + e.point.lat);
})
map.addOverlay(marker);
var opts = {
width : 250, // 信息窗口寬度
height: 100, // 信息窗口高度
title : "這里是天安門" // 信息窗口標(biāo)題
}
var infoWindow = new BMap.InfoWindow("", opts); // 創(chuàng)建信息窗口對(duì)象
map.openInfoWindow(infoWindow, map.getCenter()); // 打開信息窗口
</script>
</html>
定位功能
我們可以拖動(dòng)標(biāo)注點(diǎn)來(lái)獲取到標(biāo)注點(diǎn)的坐標(biāo)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Map </title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=******"></script>
<script>
var map = new BMapGL.Map("container"); // 創(chuàng)建地圖實(shí)例
var point = new BMapGL.Point(116.404, 39.915); // 創(chuàng)建點(diǎn)坐標(biāo)
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
var point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point); // 創(chuàng)建標(biāo)注
map.addOverlay(marker);
marker.enableDragging();
marker.addEventListener("dragend", function(e){
alert("當(dāng)前位置：" + e.point.lng + ", " + e.point.lat);
})
</script>
</html>
步行導(dǎo)航
我們已經(jīng)學(xué)會(huì)使用標(biāo)注點(diǎn)了
那么我們就可以創(chuàng)建2個(gè)標(biāo)注點(diǎn)來(lái)設(shè)計(jì)步行路線
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>步行路線規(guī)劃</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=*******"></script>
<style type="text/css">
body,
html,
#container {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微軟雅黑";
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var points = [];
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
map.addEventListener('click', function (e) {
if(points.length==2){
map.clearOverlays()
points=[];
}
var point = new BMap.Point(e.point.lng, e.point.lat)
points.push(point)
var marker = new BMap.Marker(point);
map.addOverlay(marker);
if (points.length == 2) {
var walking = new BMap.WalkingRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
walking.search(points[0], points[1]);
}
})
</script>
</body>
</html>
搜索功能
使用local.search()來(lái)實(shí)現(xiàn)搜索功能
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微軟雅黑";
}
#allmap {
width: 100%;
height: 500px;
}
.ipt{
margin: 20px auto;
width: 350px;
}
input {
font-size: 14px;
width: 300px;
display: inline-block;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=****"></script>
<title>根據(jù)關(guān)鍵字本地搜索</title>
</head>
<body>
<div class="ipt">
<input type="text">
<button>搜索</button>
</div>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var local = new BMap.LocalSearch(map, {
renderOptions: { map: map }
});
var ipt=document.querySelector('input');
// console.log(ipt)
var btn=document.querySelector('button');
btn.onclick=function(){
// alert('aa')
local.search(ipt.value);
ipt.value=''
}
</script>
地鐵路線規(guī)劃
原理跟地圖路線規(guī)劃一樣,添加兩個(gè)標(biāo)注點(diǎn),根據(jù)標(biāo)注點(diǎn)來(lái)規(guī)劃路線文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-456255.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>線路規(guī)劃</title>
<script type="text/javascript"
src="http://api.map.baidu.com/api?type=subway&v=1.0&ak=*****"></script>
<style type="text/css">
#container {
height: 100%
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var subwayCityName = '廣州';
var list = BMapSub.SubwayCitiesList;
var subwaycity = null;
for (var i = 0; i < list.length; i++) {
if (list[i].name === subwayCityName) {
subwaycity = list[i];
break;
}
}
// 獲取廣州地鐵數(shù)據(jù)-初始化地鐵圖
var subway = new BMapSub.Subway('container', subwaycity.citycode);
var zoomControl = new BMapSub.ZoomControl({
anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT,
offset: new BMapSub.Size(10, 100)
});
subway.addControl(zoomControl);
var zoomControl = new BMapSub.ZoomControl({
anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT,
offset: new BMapSub.Size(10, 100)
});
subway.addControl(zoomControl);
var points = [];
subway.addEventListener('tap', function (e) {
if (points.length == 0) {
var startIcon = new BMapSub.Icon(
'https://api.map.baidu.com/images/subway/start-bak.png',
new BMapSub.Size(50, 80)
);
var marker = new BMapSub.Marker(e.station.name, { icon: startIcon });
subway.addMarker(marker);
subway.setCenter(e.station.name);
subway.setZoom(1);
points.push(e.station.name)
} else {
var startIcon = new BMapSub.Icon(
'https://api.map.baidu.com/images/subway/end-bak.png',
new BMapSub.Size(50, 80)
);
var marker = new BMapSub.Marker(e.station.name, { icon: startIcon });
subway.addMarker(marker);
subway.setCenter(e.station.name);
subway.setZoom(1);
points.push(e.station.name)
var drct = new BMapSub.Direction(subway);
drct.search(points[0], points[1]);
subway.clearOverlays()
points = []
}
});
</script>
</body>
</html>
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-456255.html
到了這里，關(guān)于百度地圖API的使用(附案例)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
