Class:覆盖物/MarkerImage

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://lbs.qq.com/doc_v2/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://lbs.qq.com/doc_v2/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://lbs.qq.com/doc_v2/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://lbs.qq.com/doc_v2/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>

新窗口打开在线试一试