百度地图开发
2020-04-15 本文已影响0人
南崽
使用方法
- 1.注册百度账号
- 申请成为百度开发者
- 获取服务密钥(ak)
- 使用相关服务功能
ak申请
-
JavaScript API只支持浏览器类型的ak，请开发者在申请ak时注意选择
异步加载
JavaScript API GL v1.0支持
异步加载，可以在引用脚本的时候添加callback参数，当脚本加载完成后callback函数会被立刻调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>异步加载</title>
<script type="text/javascript">
function initialize() {
var mp = new BMapGL.Map('map');
mp.centerAndZoom(new BMapGL.Point(121.491, 31.233), 11);
}
function loadScript() {
var script = document.createElement("script");
script.src = "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body></body>
</html>
地图展示
1. 编写HTML页面的基础代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图开发</title>
<style>
#container{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
2. 引入百度地图API文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
3. 初始化地图逻辑
首先创建地图实例，之后用一个Point坐标点和缩放级别来初始化地图
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
4. 开启鼠标滚轮缩放
地图的鼠标滚轮缩放
默认是关闭的，需要配置开启
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
5. 设置地图的旋转角度和倾斜角度
map.setHeading(64.5); //设置地图旋转角度
map.setTilt(73); //设置地图的倾斜角度
添加控件
声明控件并添加到地图中
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
map.addControl(zoomCtrl);
自定义标注
// 自定义标注
let Icon = new BMap.Icon(
'./assets/start_point.png',
// 图片的地址
new BMap.Size(36,42),
// 显示图片的大小
{imageSize:new BMap.Size(36,42),anchor:new BMap.Size(18,42)});
// 把原始图片缩小为 36,42， 偏移到底部中心区域，（默认是左上角）
var marker = new BMap.Marker(point,{icon:Icon});
// 创建一个标注
map.addOverlay(marker);
// 添加标注到地图
绘制图形
- 绘制圆形区域
var circle = new BMap.Circle(
point,
// 中心点位置
500,
// 半径
{strokeColor:"blue",strokeWeight:2,strokeOpacity:0.5,fillOpacity:0.4})
// stroke边框 fill 填充 Opacity透明度
map.addOverlay(circle);
- 绘制多边形
var polygon = new BMap.Polygon([
new BMap.Point(113.6729090076618, 34.792850585314234),
new BMap.Point(113.67341716599596, 34.780524355204825),
new BMap.Point(113.65634304596864, 34.78010506298753),
new BMap.Point(113.64841577595597, 34.79184443213241)
],
// 多边形顶点
{strokeColor:"orange",strokeWeight:2,strokeOpacity:0.5,fillColor:'blue',fillOpacity:0.1});
// 边框填充颜色与透明度
map.addOverlay(polygon);
- 绘制线
let line = new BMap.Polyline([
new BMap.Point(113.665, 34.784),
new BMap.Point(113.66478440667755, 34.78598630008208),
new BMap.Point(113.66747932320749, 34.78672745622025),
new BMap.Point(113.66823389983587, 34.7868905096687),
new BMap.Point(113.66832373038686, 34.787587188920526),
new BMap.Point(113.66909627312545, 34.78763165760732),
],{strokeColor:"red",strokeWidth:2})
map.addOverlay(line);
信息窗口
let str = `<div class="info"><p>Content</p></div>`;
// 弹出框内容
var info = new BMap.InfoWindow(
str, // 弹出框内容
{title:'Title'}) // 配置 width 宽，height高， title标题
marker.addEventListener("click",()=>{
map.openInfoWindow(info,point);
// 当marker被单击时候打开信息窗口
})
map.openInfoWindow(info,point);
实现搜索功能
<html>
<body>
<input type="text" onblur="blurHd(this)">
<script>
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("景点");
function blurHd(e){
local.search(e.value);
}
</script>
</body>
</html>
路径规划
var end = null;
map.addEventListener("click",e=>{
console.log(e.point);
end = new BMap.Point(e.point.lng,e.point.lat);
// 单击获取结束的点；
driving.search(point,end)
// 查找两个点的路径
})
// 规划两个点的行车，公交，步行的路线
var driving = new BMap.DrivingRoute(map,{
renderOptions:{map:map,autoViewport:true}
})
通过api接口获取当前城市
<html>
<head>
<script src="./jquery-3.4.1.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
</head>
<body>
<h1></h1>
</body>
<script>
$(function(){
$.ajax({
url:'http://api.map.baidu.com/location/ip?ak=您的密钥&ip=&coor=bd09ll&output=jsonp',
dataType:"jsonp",
success:function(res){
// console.log(res);
$("h1").html(res.content.address);
}
})
</script>
</html>
地点输入提示
<html>
<head>
<script src="./jquery-3.4.1.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
</head>
<body>
<div class="search">
<input type="text" id="searchbox">
<div class="tip"></div>
</div>
</body>
<script>
// 当searchbox 发生改变时候 再发起ajax请求
$("#searchbox").on("input",function(){
// 显示tip
$(".tip").show();
$.ajax({
url:`http://api.map.baidu.com/place/v2/suggestion?query=${$("#searchbox").val()}®ion=郑州&city_limit=true&output=json&ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde`,
dataType:"jsonp",
success:function(res){
console.log(res);
$(".tip").html(res.result.map(item=>`<p>${item.name}</p>`).join(''));
},
})
})
$(".tip").on("click","p",function(){
local.search($(this).text());
// 执行地图搜索 为当前单击的p标签
$(".tip").hide();
// 隐藏tip
})
})
</script>
</html>
