qq.maps.MarkerImage 类

继承自MVCObject

用来定义Marker图标的样式

构造函数

创建MarkerImage类的语法:

new qq.maps.MarkerImage(url, size, origin, anchor, scaleSize);

参数:

url : {String}
(必填) 图片地址
size : {Size}
(可选) 图标尺寸,该尺寸为显示图标的实际尺寸,不是整个图片的原始尺寸,当需要显示的是整个图片中一部分的时候必须设置该属性。
origin : {Point}
(可选) 切图坐标,该坐标是相对于图片左上角的相对像素坐标,当需要显示的是整个图片中一部分的时候必须设置该属性,默认为(0,0)。
anchor : {Point}
(可选) 锚点坐标,描述经纬度点对应图标中的位置,坐标是相对于图标部分左上角的相对像素坐标,如果设置的origin参数,该坐标就是相对于origin的相对坐标,默认为底部中心点(x/2,y)
scaleSize : {Size}
(可选) 缩放尺寸,用于拉伸或缩小原图片时使用,该尺寸是用来改变整个图片的尺寸。
shadowAngle : {Number}
(可选) 阴影角度,定义阴影与Y轴正半轴的夹角,在动画时阴影会朝设置的方向运动

实例

本示例中,介绍如何自定义标注图片和阴影

JavaScript
function init() {
    var center = new qq.maps.LatLng(39.982163, 116.306070);
    var map = new qq.maps.Map(document.getElementById("container"), {
        center: center,
        zoom: 16
    });
    //设置Marker自定义图标的属性,size是图标尺寸,该尺寸为显示图标的实际尺寸,origin是切图坐标,该坐标是相对于图片左上角默认为(0,0)的相对像素坐标,anchor是锚点坐标,描述经纬度点对应图标中的位置
    var anchor = new qq.maps.Point(0, 39),
        size = new qq.maps.Size(42, 68),
        origin = new qq.maps.Point(0, 0),
        icon = new qq.maps.MarkerImage(
            "https://open.map.qq.com/doc/img/nilt.png",
            size,
            origin,
            anchor
        );
    //设置Marker阴影图片属性,size是图标尺寸,该尺寸为显示图标的实际尺寸,origin是切图坐标,该坐标是相对于图片左上角默认为(0,0)的相对像素坐标,anchor是锚点坐标,描述经纬度点对应图标中的位置
    var anchorb = new qq.maps.Point(3, -30),
        sizeb = new qq.maps.Size(42, 11),
        origin = new qq.maps.Point(0, 0),
        iconb = new qq.maps.MarkerImage(
            "https://open.map.qq.com/doc/img/nilb.png",
            sizeb,
            origin,
            anchorb
        );
    var marker = new qq.maps.Marker({
        map: map,
        position: center
    });
    marker.setIcon(icon);
    marker.setShadow(iconb);
}
JavaScript+HTML
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>设置marker为大头针样式</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        body,
        button,
        input,
        select,
        textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p {
            width: 603px;
            padding-top: 3px;
            margin-top: 10px;
            overflow: hidden;
        }
        .btn {
            width: 112px;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

</head>

<body onLoad="init()">
    <script>
        function init() {
            var center = new qq.maps.LatLng(39.982163, 116.306070);
            var map = new qq.maps.Map(document.getElementById("container"), {
                center: center,
                zoom: 16
            });
            //设置Marker自定义图标的属性,size是图标尺寸,该尺寸为显示图标的实际尺寸,origin是切图坐标,该坐标是相对于图片左上角默认为(0,0)的相对像素坐标,anchor是锚点坐标,描述经纬度点对应图标中的位置
            var anchor = new qq.maps.Point(0, 39),
                size = new qq.maps.Size(42, 68),
                origin = new qq.maps.Point(0, 0),
                icon = new qq.maps.MarkerImage(
                    "https://open.map.qq.com/doc/img/nilt.png",
                    size,
                    origin,
                    anchor
                );
            //设置Marker阴影图片属性,size是图标尺寸,该尺寸为显示图标的实际尺寸,origin是切图坐标,该坐标是相对于图片左上角默认为(0,0)的相对像素坐标,anchor是锚点坐标,描述经纬度点对应图标中的位置
            var anchorb = new qq.maps.Point(3, -30),
                sizeb = new qq.maps.Size(42, 11),
                origin = new qq.maps.Point(0, 0),
                iconb = new qq.maps.MarkerImage(
                    "https://open.map.qq.com/doc/img/nilb.png",
                    sizeb,
                    origin,
                    anchorb
                );
            var marker = new qq.maps.Marker({
                map: map,
                position: center
            });
            marker.setIcon(icon);
            marker.setShadow(iconb);
        }
    </script>
    <div style="width:603px;height:300px" id="container"></div>
    <p>自定义marker样式,并添加阴影。</p>
</body>

</html>