百度地图JavaScript API 学习之自定义标注图标(二)

地图绘制之添加自定义标注图标(二)

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

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

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

  • 通过参数MarkerOptionsicon属性进行设置
  • 使用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);(此时,改变了图片的真实大小)

这里写图片描述

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值