调用百度地图的API可以非常方便的实现我们需要的地图的功能，今天研究了一下调用百度地图API，显示定位信息、地图标注、路径导航等问题处理起来真的很方便。功能很强大，调用也很方便， 可以实现的功能非常多，有一点要注意：调用API要有一个开发者密钥，申请过程十分简单。
- 申请ak：调用百度地图API，首先你需要得在官网注册一个帐号然后申请一个密钥，注册网址：http://lbsyun.baidu.com/，在打开网页的最下方可以申请密钥
- 如果只是想在浏览器及本地测试，创建应用类型选择为：浏览器端，Referer白名单输入：*
- 提交完成后，就会得到一个密钥，在调用百度地图API的时候需要将“你的密钥”替换为你申请得到的密钥
官方文档有很详细的说明和示例，可以参照示例将各个功能以及代码进行组合，实现你想要的效果，这里给出一个简单的 demo，简单的加了几个按钮，可以直接复制粘贴到本地 html 文件，用浏览器打开就可以看到效果。（记得替换密钥哦）
html 完整示例源码：
<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{height:600px;width:1200px;}
#r-result{width:100%; font-size:14px;}
</style>
<!-- 设置地图ak, api key 申请的密钥 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
<title>百度地图调用</title>
</head>
<body>
<div id="allmap" ></div>
<input type="button" onclick="$('#allmap div.anchorBL').hide();" value="移除地图LOGO和版权说明(不建议使用)"/>
<input type="button" onclick="addYourCopyright()" value="自定义版权说明"/>
<input type="button" onclick="showSZ()" value="深圳市区域轮廓"/>
<input type="button" onclick="showSH()" value="切换到上海市"/>
<input type="button" onclick="addWalking()" value="步行路线图" />
<input type="button" onclick="addGeolocation()" value="定位控件" />
<input type="button" onclick="addCities()" value="城市列表控件" />
<input type="button" onclick="changeThemeDark()" value="切换显色主题" />
<div id="r-result">
<input type="button" onclick="add_control();" value="添加缩放控件" />
<input type="button" onclick="delete_control();" value="删除缩放控件" />
<input type="button" onclick="showOver()" value="显示带标注marker" />
<input type="button" onclick="hideOver()" value="隐藏带标注marker" />
<input type="button" onclick="marker.enableDragging();" value="可拖拽" />
<input type="button" onclick="marker.disableDragging();" value="不可拖拽" />
<input type="button" onclick="showVectorMarker()" value="显示VectorMarker" />
<input type="button" onclick="hideVectorMarker()" value="隐藏VectorMarker" /><br>
<input type="button" onclick="showYourMarker()" value="显示自定义Marker" />
<input type="button" onclick="hideYourMarker()" value="隐藏自定义Marker" />
<input type="button" onclick="addTenMarkers()" value="添加10个标注" />
<input type="button" onclick="addTenRandomMarkers()" value="随机添加10个标注" /><br>
城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" />
<input type="button" value="查询" onclick="theLocation()" />
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(114.04254,22.561866);
map.centerAndZoom(point,15);
// 初始化地图,用城市名设置地图中心点，显示比例级别
function showSH(){map.centerAndZoom("上海",15); }
function theLocation(){
var city = document.getElementById("cityName").value;
if(city != ""){
map.centerAndZoom(city,15); // 用城市名设置地图中心点，显示比例级别
}
}
//设置地图样式 dark
function changeThemeDark(){ map.setMapStyle({style : "dark" });}
//鼠标滚动缩放
map.enableScrollWheelZoom(true);
//行政区域轮廓
function getBoundary(){
var bdary = new BMap.Boundary();
bdary.get("深圳市", function(rs){ //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
addlabel();
});
}
//深圳行政区域轮廓
function showSZ(){
getBoundary();
}
//setTimeout(function(){
// getBoundary();
//}, 2000);
//百度地图级别有19级，级别 比例尺
// 19级 20m
// 18级 50m
// 17级 100m
// 16级 200m
// 15级 500m
// 14级 1km
// 13级 2km
// 12级 5km
// 11级 10km
// 10级 20km
// 9级 25km
// 8级 50km
// 7级 100km
// 6级 200km
// 5级 500km
// 4级 1000km
// 3级 2000km
// 2级 5000km
// 1级 10000km
//在地图上添加图片文字等信息(版权控件)
//Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数
var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); //设置版权控件位置
//添加版权控件
function addYourCopyright(){map.addControl(cr); }
var bs = map.getBounds(); //返回地图可视区域
cr.addCopyright({id: 1, content: "<a href='#' style='font-size:20px;background:yellow'>我是自定义版权控件</a>", bounds: bs});
// var cr=new BMap.CopyrightControl({anchor:BMAP_ANCHOR_TOP_LEFT,offset:new BMap.Size(0,0)});
// map.addControl(cr);
//cr.addCopyright({id:1,content:"<img src='banner.png' style='width:800px; height:50px' />"}); //需要更改为你的图片地址和名称
// 初始化地图， 设置中心点坐标和地图级别
//map.centerAndZoom(new BMap.Point(116.4035,39.915),15);
//setTimeout(function(){
// map.setZoom(14);
//}, 2000); //2秒后放大到14级
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
/*缩放控件type有四种类型:
BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
//添加控件和比例尺
function add_control(){
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
}
//移除控件和比例尺
function delete_control(){
map.removeControl(top_left_control);
map.removeControl(top_left_navigation);
map.removeControl(top_right_navigation);
}
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e){
// 定位成功事件
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("当前定位地址为：" + address);
});
geolocationControl.addEventListener("locationError",function(e){
// 定位失败事件
alert(e.message);
});
//添加定位到地图
function addGeolocation(){map.addControl(geolocationControl);}
//城市列表
function addCities(){
var size = new BMap.Size(10, 20);
map.addControl(new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: size,
// 切换城市之间事件
// onChangeBefore: function(){
// alert('before');
// },
// 切换城市之后事件
// onChangeAfter:function(){
// alert('after');
// }
}));
}
var marker = new BMap.Marker(new BMap.Point(114.04254,22.561866)); // 创建点
map.addOverlay(marker);
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker.disableDragging();// 不可拖拽
//获取marker的位置
marker.addEventListener("click",getAttr);
function getAttr(){
var p = marker.getPosition(); //获取marker的位置
alert("marker的位置是" + p.lng + "," + p.lat);
}
//创建小狐狸
var pt = new BMap.Point(114.04111,22.561744);
var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
// 将标注添加到地图中
map.addOverlay(marker2);
marker2.hide();
function showYourMarker(){marker2.show();}
function hideYourMarker(){marker2.hide();}
var marker3 = new BMap.Marker(new BMap.Point(114.04000,22.561600)); // 创建标注
map.addOverlay(marker3);
var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
marker3.setLabel(label);
marker3.hide();
function showOver(){
marker3.show();
}
function hideOver(){
marker3.hide();
}
// 编写自定义函数,创建标注
function addMarker(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
// 随机向地图添加10个标注
function addTenRandomMarkers(){
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i < 10; i ++) {
var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
addMarker(point);
}
}
// 向地图添加10个标注
function addTenMarkers(){
var longS = 114.04554;
var latS = 22.561666;
for (var i = 0; i < 10; i ++) {
var point = new BMap.Point(longS + 0.001*i, latS + 0.0001*i);
addMarker(point);
}
}
//设置marker图标为水滴矢量图标
var vectorMarker = new BMap.Marker(new BMap.Point(point.lng,point.lat-0.0003), {
// 指定Marker的icon属性为Symbol
icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
scale: 1.2,//图标缩放大小
fillColor: "blue",//填充颜色
fillOpacity: 0.8//填充透明度
})
});
map.addOverlay(vectorMarker);
vectorMarker.hide();
function showVectorMarker(){vectorMarker.show();}
function hideVectorMarker(){vectorMarker.hide();}
vectorMarker.enableDragging();// 可拖拽
//获取marker的位置
vectorMarker.addEventListener("click",getAttr);
function getAttr(){
var p = vectorMarker.getPosition(); //获取vectorMarker的位置
alert("vectorMarker的位置是" + p.lng + "," + p.lat);
}
//步行线路图
var walking = new BMap.WalkingRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
var start = new BMap.Point(114.038143,22.547901);
var end = new BMap.Point(114.053495,22.548226);
function addWalking(){ walking.search(start, end);}
</script>
效果图：
map.png
网友评论