百度地图JavaScript API 学习之创建标注

最新推荐文章于 2024-06-24 14:25:44 发布

置顶 monkeyfly007

最新推荐文章于 2024-06-24 14:25:44 发布

阅读量5.8k

点赞数

分类专栏：百度地图API 文章标签：百度地图JS API之创建标注

本文链接：https://blog.csdn.net/tel13259437538/article/details/79890234

版权

百度地图API 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

在地图上绘制之创建标注

官方demo示例和讲解——直戳这里

简介

所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。
覆盖物拥有自己的地理坐标，当拖动或缩放地图时，它们会相应的移动。
覆盖物主要分为：标注（点标注、矢量图形（包括折线、多边形、圆））、信息窗口、图层。

说明：本节重点介绍一下如何向地图添加标注

百度地图提供的覆盖物

覆盖物	类名	说明
抽象基类	Overlay	所有的覆盖物均继承此类的方法
点	Marker	表示地图上的点，可自定义标注的图标
文本	Label	表示地图上的文本标注，您可以自定义标注的文本内容
折线	Polyline	表示地图上的折线
多边形	Polygon	表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色
圆	Circle	表示地图上的圆
信息窗口	InfoWindow	信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开
地面叠加层	GoundOverlay	表示叠加在地图上的图片，图片的链接、大小、位置等属性可以自定义
海量点	PointCollection	针对点的数量很大的情况，可以使用海量点进行展示
自定义覆盖物	自定义	支持通过继承覆盖物基类Overlay，自定义覆盖物

最基础的用法就是：在地图上添加一个点覆盖物。
由上表可知，在这里就需要用到Marker类来创建地图上的标注点了，创建完成之后添加到地图中就可以了。

关于标注点我们要知道的

Marker是一个用来往地图上添加点标记的类。使用它可以将任何你希望用户看到的兴趣点标注在地图上。
Marker的构造函数的参数为Point和MarkerOptions（可选）。
API提供了默认的图标（标注）样式，我们可以通过Icon类来指定自定义图标。（目前用不上，知道就行）

覆盖物类Marker的使用如下图所示： Marker类的使用详情请戳这里查看

分析：
（1）该构造函数存在两个参数：一个是Point类型的；一个是MarkerOptions类型的。
（2）MarkerOptions类型是可选参数。（目前来说是用不到，如果要使用自定义图标来添加覆盖物的话可以用到该参数） MarkerOptions类的使用详情请戳这里查看

用法：

/*
*百度地图使用BMap作为命名空间，这是人家的规定，知道就行了。
*此外，所有的类都在该命名空间之下。
*如果要使用其他类，应该这么写：比如：BMap.Map()、BMap.Control()、BMap.Overlay()
*/
var mk = new BMap.Marker(point);//创建了一个点类型的标注，即标注点

至此，标注点就已经创建完成。下面要做的就是：如何将标注点添加到地图中。

可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物。
注意：此方法不适用于InfoWindow（即信息窗口覆盖物，下面有提及）。

如下图所示：

图1 —— 核心类Map中的方法
这里写图片描述

使用方法：

map.addOverlay(mk);//里面的参数为覆盖物实例，所以添加之前肯定要先创建一个覆盖物实例

//上面我们使用Marker类的构造函数Marker()创建了一个标注点，同时也创建一个图像标注实例mk。
//所以，在addOverlay()方法中传入之前创建的标注实例mk即可将该标注添加到地图中。

图2 —— 覆盖物的抽象基类（点击可查看）

注：（1）所有覆盖物都继承基类的方法；（2）此类不可实例化。
这里写图片描述

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
    <title创建标注</title>
    <style>
        html,body,#allmap{
            height: 100%;
            width: 100%;
            overflow:hidden;
            margin:0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script>
</head>
<body>
    <div id="allmap"></div>
    <script>
        var map = new BMap.Map("allmap");//创建一个地图
        var point = new BMap.Point(116.404, 39.915);//创建一个地理点坐标
        map.centerAndZoom(point,12);
        /*至此，地图初始化完成*/

        // Marker是一个用来往地图上添加点标记的类。使用它可以将任何你希望用户看到的兴趣点标注在地图上。
        // Marker的构造函数的参数为Point和MarkerOptions（可选）。
        var mk = new BMap.Marker(point);//创建标注
        map.addOverlay(mk);//将标注添加到地图中
    </script>
</body>
</html>

其实也没几行代码，看起来并不复杂：说实话，使用很简单，只要会复制粘贴就行，但是要理解起来还是要花时间研究一下的

这里写图片描述

效果图展示

这里写图片描述

monkeyfly007

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
百度地图JavaScript API 学习之创建标注

在地图上绘制之创建标注官方demo示例和讲解——直戳这里简介所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标，当拖动或缩放地图时，它们会相应的移动。覆盖物主要分为：标注（点标注、矢量图形（包括折线、多边形、圆））、信息窗口、图层。说明：本节重点介绍一下如何向地图添加标注百度地图提供的覆盖物覆盖物类名说明...
复制链接

扫一扫

专栏目录