申请使用
首先要想使用百度地图的服务需要在百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)注册账户,并申请自己的密钥
实例化一个地图
通过百度地图建立最简单的地图需要的最少代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>线/面/圆可编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body,
html,
#container {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.404, 39.915); //中心点
map.centerAndZoom(point, 15); //地图中心
map.enableScrollWheelZoom(true); //允许使用鼠标滚轮来进行缩放
</script>
在地图上绘制矢量线段和图形
//在script的部分添加
<script>
var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
//在这一部分添加用于绘制的代码
//基本都是通过var定义图形类型
//通过添加基本属性后,再利用map.addOverlay()实例化
//下面是一个例子
// 绘制面
var polygon = new BMapGL.Polygon([
new BMapGL.Point(116.387112, 39.920977),
new BMapGL.Point(116.385243, 39.913063)
], {
strokeColor: 'blue',
strokeWeight: 2,
strokeOpacity: 0.5
});
map.addOverlay(polygon);
</script>
百度地图提供了以下几种类型
绘制面
var polygon = new BMapGL.Polygon([
new BMapGL.Point(坐标1),
new BMapGL.Point(坐标2)
//可以添加多个,会自动将最后一个坐标与第一个坐标连接
//使用逗号隔开,最后坐标末尾一个没有逗号
], {
strokeColor: 'blue', //线段的颜色
strokeWeight: 2, //线段宽度
strokeOpacity: 0.5 //线段的不透明度
});
map.addOverlay(polygon);
绘制线
// 绘制线
var polyline = new BMapGL.Polyline([
new BMapGL.Point(116.399, 39.910),
new BMapGL.Point(116.405, 39.920)
//可以添加多个,不会最后一个坐标与第一个坐标连接
], {
strokeColor: 'blue',
strokeWeight: 2,
strokeOpacity: 0.5
});
map.addOverlay(polyline);
绘制圆
// 绘制圆
var circle = new BMapGL.Circle(
new BMapGL.Point(116.404, 39.915), 500, {
strokeColor: 'blue',
strokeWeight: 2,
strokeOpacity: 0.5
});
map.addOverlay(circle);
//(116.404, 39.915)是中心的坐标
// 500 则是半径
颜色填充
上述定义的面和圆因为是封闭图形所以可以定义填充的样式
这些样式遵循SVG的使用方式
可以在这个网站获得详细信息:SVG 教程 - SVG:可缩放矢量图形 | MDN (mozilla.org)
以下列出常用类型
strokeColor: "#CCFFFF", //线段的颜色
strokeOpacity: 0.7, // 线段不透明度
strokeWeight: 1, // 线段宽度
fillColor: "#1791fc", //填充颜色
fillOpacity: 0.5 //填充的透明度
开启图形在线编辑
利用定义好的函数即可
function openEdit() {
polyline.enableEditing();
polygon.enableEditing();
circle.enableEditing();
}
function closeEdit() {
polygon.disableEditing();
polyline.disableEditing();
circle.disableEditing();
}
百度自定义的样式一般是:
//css
<style>
ul li {
list-style: none;
}
.drawing-panel {
z-index: 999;
position: fixed;
bottom: 3.5rem;
margin-left: 3rem;
padding: 1rem 1rem;
border-radius: .25rem;
background-color: #fff;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.btn {
width: 150px;
height: 30px;
float: left;
background-color: #fff;
color: rgba(27, 142, 236, 1);
font-size: 14px;
border:1px solid rgba(27, 142, 236, 1);
border-radius: 5px;
margin: 0 5px;
text-align: center;
line-height: 30px;
}
.btn:hover {
background-color: rgba(27, 142, 236, 0.8);
color: #fff;
}
</style>
<body>
<ul class="drawing-panel" style="z-index: 99;">
<li class = "btn" onclick = "openEdit()">开启线/面/圆可编辑</li>
<li class = "btn" onclick = "closeEdit()">关闭线/面/圆可编辑</li>
</ul>
</body>
可以获取坐标的地图网
中国地形图 - 中国地势图、地貌图 - 八九网 (bajiu.cn)