一、创建一个应用
创建成功可以在应用程序中查看到自己的ak密钥
二、基本使用
2.1 显示地图
在static下创建demo1.html (将密钥换成自己的就可以显示地图了)
示例:
<!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>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=您的密钥"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
</script>
</body>
</html>
2.2开启鼠标滚轮缩放(默认关闭)
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
2.3设置地图的旋转角度和倾斜角度
map.setHeading(64.5); //设置地图旋转角度
map.setTilt(73); //设置地图的倾斜角度
// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{
enableRotate: false,
enableTilt: false
});
2.4 添加控件
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
demo1.html:
<!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>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setHeading(64.5); //设置地图旋转角度
map.setTilt(73); //设置地图的倾斜角度
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
</script>
</body>
</html>
三、点、线、面
3.1向地图中添加标注
var point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
在百度地图的开发文档中打开坐标拾取器,这里以北京站为例,先获取北京站的坐标为116.433661,39.908903,然后替换point中的坐标地址。
(记得将密钥换成自己的)
<!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>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var point = new BMapGL.Point(116.433661,39.908903);
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
</script>
</body>
</html>
显示效果:
3.2 定义标注图标
var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时,其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMapGL.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您
// 需要指定大图的偏移位置,此做法与css sprites技术类似。
imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, {icon: myIcon});
map.addOverlay(marker);
示例:
<!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>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var point = new BMapGL.Point(116.433661,39.908903);
// var marker = new BMapGL.Marker(point); // 创建标注
// map.addOverlay(marker); // 将标注添加到地图中
var myIcon = new BMapGL.Icon("markers.jpg", new BMapGL.Size(87, 71), {
// 指定定位位置。
// 当标注显示在地图上时,其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMapGL.Size(0, 0),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您
// 需要指定大图的偏移位置,此做法与css sprites技术类似。
imageOffset: new BMapGL.Size(0, 0) // 设置图片偏移
});
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, {icon: myIcon});
map.addOverlay(marker);
</script>
</body>
</html>
3.3监听标注事件
marker.addEventListener("click", function(){
alert("您点击了标注");
});
3.4 添加折线
var polyline = new BMapGL.Polyline([
new BMapGL.Point(116.399, 39.910),
new BMapGL.Point(116.405, 39.920),
new BMapGL.Point(116.425, 39.900)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);
3.5 添加多边形
var polygon = new BMapGL.Polygon([
new BMapGL.Point(116.387112,39.920977),
new BMapGL.Point(116.385243,39.913063),
new BMapGL.Point(116.394226,39.917988),
new BMapGL.Point(116.401772,39.921364),
new BMapGL.Point(116.41248,39.927893)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);
3.6 添加圆形
可以参考官方文档
var point = new BMapGL.Point(116.433661,39.908903);
var circle = new BMapGL.Circle(point,1000,
{strokeColor:"blue", strokeWeight:3, strokeOpacity:0.8});
map.addOverlay(circle);
四、地图事件
4.1 监听地图的单击事件
map.addEventListener('click', function(e) {
alert('click!')
});
4.2 在回调函数中添加一些逻辑
map.addEventListener('click', function(e) {
alert('点击的经纬度:' + e.latlng.lng + ', ' + e.latlng.lat);
var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
alert('点的墨卡托坐标:' + mercator[0] + ', ' + mercator[1]);
});
4.3 移除事件监听
map.addEventListener('click', handleClick);
function handleClick (e) {
alert('点击的经纬度:' + e.latlng.lng + ', ' + e.latlng.lat);
var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
alert('点的墨卡托坐标:' + mercator[0] + ', ' + mercator[1]);
}
map.removeEventListener('click', handleClick);
五 、地球模式地图
5.1 变更地图类型为地球
map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
六、检索服务
API示例文档
open | 百度地图API SDK (baidu.com)https://lbsyun.baidu.com/index.php?title=open/jsdemoAPI参数参考文档
6.1 关键字检索
查询单个地点
var local = new BMapGL.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("景点");
查询多个地点,例如查询100个地点:加上pageCapacity:100
var local = new BMapGL.LocalSearch(map, {
renderOptions:{map: map},
pageCapacity:100
});
local.search("景点");
6.2 圆形区域搜索
var point = new BMapGL.Point(116.404, 39.915);
var circle = new BMapGL.Circle(point,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
map.addOverlay(circle);
var local = new BMapGL.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
local.searchNearby('餐馆',point,1000);
七、数据可视化
MapV开发文档 (baidu.com)https://lbsyun.baidu.com/solutions/mapvdata
八、web服务APIweb服务API | 百度地图API SDK (baidu.com)https://lbsyun.baidu.com/faq/api?title=webapi
准备工作
首先,创建一个服务端的应用程序
白名单填写,不受限制
0.0.0.0/0
使用在线格式化工具对Json数据格式化
8.1坐标转换器
坐标转换 | 百度地图API SDK (baidu.com)
import cn.hutool.core.util.StrUtil;
import cn.hutool.http.HttpRequest;
import org.junit.jupiter.api.Test;
public class TestBaiduWebApi {
private String ak = "您的密钥";
@Test
public void test(){
String url = "https://api.map.baidu.com/geoconv/v2/?coords=114.21892734521,29.575429778924&model=1&ak={}";
url = StrUtil.format(url,ak);
String body = HttpRequest.get(url).execute().body();
System.out.println(body);
}
}
8.2 普通定位
普通IP定位 | 百度地图API SDK (baidu.com)
返回的是Json数据,需要对该Json数据格式化,这样方便查看数据
import cn.hutool.core.util.StrUtil;
import cn.hutool.http.HttpRequest;
import org.junit.jupiter.api.Test;
public class TestBaiduWebApi {
private String ak = "您的密钥";
@Test
public void test(){
String url = "https://api.map.baidu.com/location/ip?ip=111.206.214.37&coor=bd09ll&ak={}";
url = StrUtil.format(url,ak);
String body = HttpRequest.get(url).execute().body();
System.out.println(body);
}
}
功能与服务
8.3 搜索(地点输入提示)
地点检索 | 百度地图API SDK (baidu.com)
import cn.hutool.core.util.StrUtil;
import cn.hutool.http.HttpRequest;
import org.junit.jupiter.api.Test;
public class TestBaiduWebApi {
private String ak = "I0DvCqBEOnwCdNwFXDvZjDBKioDf9S31";
@Test
public void test(){
String url = "https://api.map.baidu.com/place/v2/suggestion?query=天安门®ion=北京&city_limit=true&output=json&ak={}";
url = StrUtil.format(url,ak);
String body = HttpRequest.get(url).execute().body();
System.out.println(body);
}
}
8.4 路线规划(驾驶)
路线规划(v2) | 百度地图API SDK (baidu.com)
import cn.hutool.core.util.StrUtil;
import cn.hutool.http.HttpRequest;
import org.junit.jupiter.api.Test;
public class TestBaiduWebApi {
private String ak = "您的密钥";
@Test
public void test(){
String url = "https://api.map.baidu.com/direction/v2/driving?origin=40.01116,116.339303&destination=39.936404,116.452562&ak={}";
url = StrUtil.format(url,ak);
String body = HttpRequest.get(url).execute().body();
System.out.println(body);
}
}
九、BMapGLib
huiyan-fe/BMapGLLib: 百度地图JSAPI GL版JavaScript开源工具库 (github.com)