写在前面:
-
本文为百度地图开发系列文章之一,
前期回顾:
- webGIS,基于百度地图的HelloWord实现
- 如何使用前端css代码去掉百度地图左下角的图标
- 使用百度地图绘制点、线、面 | Javascript(本篇讲解)
- 百度地图开发系列之个性化地图使用的2种方法
以上对应视频教程(博客与视频前面的序号是一一对应的):
-
个人前端网站:zhangqiang.hk.cn
-
欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!
本章主要介绍与实现内容:
- 在地图上绘制出想要的点,包括自定义的点的自定义图标
- 在地图上绘制出折线
- 在地图上绘制出面(圆、多边形、矩形)
使用map.addOverlay
方法添加这些点、线、面给图层。
覆盖物 | 类名 | 说明 |
---|---|---|
抽象基类 | Overlay | 所有的覆盖物均继承此类的方法 |
点 | Marker | 表示地图上的点,可自定义标注的图标 |
折线 | Polyline | 表示地图上的折线 |
多边形 | Polygon | 表示地图上的多边形 |
圆 | Circle | 表示地图上的圆 |
1 在地图上绘制出想要的点,包括自定义的点的自定义图标
主要使用Marker
类实现
- 普通的点
var point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
- 带有自定义图标的点
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);
- 亦可给点添加监听事件
marker.addEventListener("click", function(){
alert("您点击了标注");
});
2 在地图上绘制出折线
主要使用Polyline
类实现。
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 在地图上绘制出面(圆、多边形、矩形)
- 圆
var circle = new BMapGL.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆
map.addOverlay(circle);
- 多边形
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);
- 矩形
var pStart = new BMapGL.Point(116.392214,39.918985);
var pEnd = new BMapGL.Point(116.41478,39.911901);
var rectangle = new BMapGL.Polygon([
new BMapGL.Point(pStart.lng,pStart.lat),
new BMapGL.Point(pEnd.lng,pStart.lat),
new BMapGL.Point(pEnd.lng,pEnd.lat),
new BMapGL.Point(pStart.lng,pEnd.lat)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建矩形
map.addOverlay(rectangle); //增加矩形
4 彩蛋
- 神奇的
console
语句
console.info("%c神奇的console语句", "color: #3190e8; font-size: 30px; font-family: sans-serif");
本文参考链接:https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/addOverlay
感谢看到末尾! 码字不易,点赞是最大的支持哦!