使用百度地图绘制点、线、面

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

写在前面：

本文为百度地图开发系列文章之一，

前期回顾：
以上对应视频教程（博客与视频前面的序号是一一对应的）：
1. 百度地图开发从零开始00初始化地图创建helloWorld
2. 百度地图开发从零开始01去地图左下角图标
个人前端网站：zhangqiang.hk.cn
欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！

本篇github源码地址： github.com/front-end-s…

本章主要介绍与实现内容：

在地图上绘制出想要的点，包括自定义的点的自定义图标
在地图上绘制出折线
在地图上绘制出面（圆、多边形、矩形）

使用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");

本文参考链接：lbsyun.baidu.com/index.php?t…

感谢看到末尾！ 码字不易，点赞是最大的支持哦！

使用百度地图绘制点、线、面 | Javascript

1 在地图上绘制出想要的点，包括自定义的点的自定义图标

2 在地图上绘制出折线

3 在地图上绘制出面（圆、多边形、矩形）

4 彩蛋