百度地图JavaScript API 学习之自定义标注图标（二）

最新推荐文章于 2024-06-17 15:26:41 发布

置顶 monkeyfly007

最新推荐文章于 2024-06-17 15:26:41 发布

阅读量7.3k

点赞数

分类专栏：百度地图API 文章标签：百度地图JS API之自定义标注图标

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

版权

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

10 篇文章 1 订阅

订阅专栏

地图绘制之添加自定义标注图标（二）

在上篇文章《百度地图JavaScript API 学习之自定义标注图标（一）》中已经提到了第一种方法的使用，现在就来具体说一说第二种方法的使用。

通过Icon类可实现自定义标注的图标。附上Icon的类参考链接，自行查看

官方提供了两种方法来自定义标注图标：

通过参数MarkerOptions的icon属性进行设置
使用Marker.setIcon()方法。

第二种方法

即使用Marker.setIcon()方法来创建自定义标注图标。

用法：MarkerOptions类的参考用法，点击查看

（1）先使用Marker类的构造函数Marker(point: Point, opts: MarkerOptions)创建一个图像标注实例。

//创建了一个标注点（这里用到了第二个参数MarkerOptions，可通过对象字面量形式表示。）
var marker = new BMap.Marker(point,{title:"标注提示语句"});//opts参数第一种方法用过了，这里忽略就行了。

这里写图片描述

（2）然后通过Icon类创建一个自定义的标注图标。附上Icon的类参考链接，自行查看

/*Icon类的构造函数的使用方法：
* Icon(url: String, size: Size, opts: IconOptions)
* 构造函数Icon()中有3个参数：String类型的图片地址url；Size类型的图片大小；和可选参数IconOptions。
* 第二个参数是Size类型的，基础类Size以像素表示一个矩形区域的大小。
* 注：可选参数IconOptions可以根据自己需要来决定要不要。（为了简单起见，我们这里先不用）
*/
var myIcon = new BMap.Icon('node_position.png',new BMap.Size(30,30));

具体用法看图：（看不懂的可以参考代码中的注释）

这里写图片描述

Icon类的方法根据自己需要调用就行了，本案例没有涉及到它的使用。
这里写图片描述

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
    <title定义标注图标方法1</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>
        /*实现方法：
        （1）通过参数MarkerOptions的icon属性进行设置；
        （2）使用Marker.setIcon()方法
        */

        var map = new BMap.Map("allmap");//创建一个地图
        var point = new BMap.Point(116.404, 39.915);//创建一个地理点坐标
        map.centerAndZoom(point,12);

        //构造函数：IconMarker(point: Point, opts: MarkerOptions)    创建一个图像标注实例。
        //MarkerOptions类表示Marker构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

        var mk = new BMap.Marker(point,{title:"标注提示语句"});//创建标注

        /*Icon类表示标注覆盖物所使用的图标。
        *构造函数：Icon(url: String, size: Size, opts: IconOptions)  以给定的图像地址和大小创建图标对象实例
        *属性：
        *anchor:Size 图标的定位点相对于图标左上角的偏移值。【此功能相当于定位中的left和top属性】
        *size:Size   图标可视区域的大小。(图标是作为span标签的背景图片添加上去的，打开控制台自行查看)
        *imageSize:Size   图标所用的图片的大小。此功能的作用等同于CSS中的background-size属性。
        *imageOffset:Size 图标所用的图片相对于可视区域的偏移值。【此做法与css sprites技术类似。】
        *                 此功能，相当于CSS中的background-position属性。
        *imageUrl:String 图标所用图像资源的位置。
        */

        /*IconOptions表示Icon构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。
        *anchor:Size 图标的定位锚点。是相对于图标左上角的偏移值。默认等于图标宽度和高度的中间值。【指定标注的位置】
        *imageOffset:Size 图片相对于可视区域的偏移值。【当您需要从一幅较大的图片中截取某部分作为标注图标时使用】
        */

        /*Size类以像素表示一个矩形区域的大小。
        *构造函数：Size(width: Number, height: Number)   以指定的宽度和高度创建一个矩形区域大小对象   
         */

        // var icon = new BMap.Icon('location.ico',new BMap.Size(32,32));
        //var icon = new BMap.Icon('location.png',new BMap.Size(20,27));
        /*设置的是span元素的大小，即图片区域的大小，并非图片本身的大小*/

        //icon.imageSize = new BMap.Size(20,27);//设置span元素背景图片的真实大小，即图片本身的大小
        //icon.anchor = new BMap.Size(10,20);//设置span元素的偏移，即整个图片区域的偏移量，相当于设置left，top属性

        /*图片路径自己指定*/
        var icon = new BMap.Icon('node_position.png',new BMap.Size(30,30));
        icon.imageSize = new BMap.Size(30,30);
        icon.anchor = new BMap.Size(15,25);
        mk.setIcon(icon); 
        map.addOverlay(mk);//将标注添加到地图中

    </script>
</body>
</html>

效果图

未设置该属性时：icon.anchor = new BMap.Size(15,25);

这里写图片描述

设置该属性后：icon.anchor = new BMap.Size(15,25);
这里写图片描述

设置该属性时：icon.anchor = new BMap.Size(0,0);

这里写图片描述

设置该属性时：icon.imageSize = new BMap.Size(20,20);(此时，改变了图片的真实大小)

这里写图片描述

monkeyfly007

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
百度地图JavaScript API 学习之自定义标注图标（二）

地图绘制之添加自定义标注图标（二）在上篇文章《百度地图JavaScript API 学习之自定义标注图标（一）》中已经提到了第一种方法的使用，现在就来具体说一说第二种方法的使用。通过Icon类可实现自定义标注的图标。附上Icon的类参考链接，自行查看官方提供了两种方法来自定义标注图标：通过参数MarkerOptions的icon属性进行设置使用Marker.setIcon()方...
复制链接

扫一扫

专栏目录