Object:覆盖物/MarkerOptions

qq.maps.MarkerOptions 对象

Marker的参数。

属性

名称	类型	说明
`animation`	`MarkerAnimation`	用于指定Marker被添加到Map上时的动画效果。
`clickable`	`Boolean`	如果为true，Marker可响应鼠标的click事件和触屏设备上touch事件。默认值true。
`draggable`	`Boolean`	该值为true时，Marker可以拖拽移动，默认值false。
`decoration`	`MarkerDecoration`	Marker的覆盖内容
`flat`	`Boolean`	为true，表示不显示默认图标的阴影，默认值为false。
`cursor`	`String`	鼠标hover的光标形状。
`icon`	`MarkerImage`	Marker的图标，当使用自定义图标时，设置该属性。
`shadow`	`MarkerImage`	Marker的阴影使用的图标。
`shape`	`MarkerShape`	Marker图片可点区域。
`title`	`String`	Marker标题，鼠标划过Marker时显示。
`visible`	`Boolean`	是否可见，为true时可见。
`zIndex`	`Number`	Marker的z轴高度，它决定了Marker在地图上的显示前后顺序。zIndex大的Marker显示在zIndex值小的前面。若没有设置zIndex属性，默认情况下， Marker在地图屏幕纵向位置决定前后顺序，位置越靠近屏幕下方的Marker，显示在位置靠近屏幕上方的Marker的前面。
`map`	`Map`	显示Marker的地图。
`position`	`LatLng`	Marker的位置坐标，必填项。
`rotation`	`Number`	marker旋转角度(取值范围0-360)
`autoRotation`	`Boolean`	是否自动旋转。点标记在使用moveTo、moveAlong动画时，路径方向若有变化，点标记是否自动调整角度，默认为false。

实例

本示例中，介绍如何标注的参数

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
    var marker = new qq.maps.Marker({
        //设置Marker的位置坐标
        position: center,
        //设置Marker被添加到Map上时的动画效果为落下
        animation: qq.maps.MarkerAnimation.DOWN,
        //设置Marker被添加到Map上时的动画效果为反复弹跳
        //animation:qq.maps.MarkerAnimation.BOUNCE
        //设置Marker被添加到Map上时的动画效果为从天而降
        //animation:qq.maps.MarkerAnimation.DROP
        //设置Marker被添加到Map上时的动画效果为升起
        //animation:qq.maps.MarkerAnimation.UP
        //设置显示Marker的地图
        map: map,
        //设置Marker可拖动
        draggable: true,
        //Marker的覆盖内容
        decoration: new qq.maps.MarkerDecoration("标记"),
        //自定义Marker图标为大头针样式
        icon: new qq.maps.MarkerImage(
            "https://lbs.qq.com/doc/img/nilt.png"),
        //自定义Marker图标的阴影
        shadow: new qq.maps.MarkerImage(
            "https://lbs.qq.com/doc/img/nilb.png"),
        //设置Marker标题，鼠标划过Marker时显示
        title: '测试',
        //设置Marker的可见性，为true时可见,false时不可见
        visible: true,
    });

}

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>设置markerOptions属性</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
            var marker = new qq.maps.Marker({
                //设置Marker的位置坐标
                position: center,
                //设置Marker被添加到Map上时的动画效果为落下
                animation: qq.maps.MarkerAnimation.DOWN,
                //设置Marker被添加到Map上时的动画效果为反复弹跳
                //animation:qq.maps.MarkerAnimation.BOUNCE
                //设置Marker被添加到Map上时的动画效果为从天而降
                //animation:qq.maps.MarkerAnimation.DROP
                //设置Marker被添加到Map上时的动画效果为升起
                //animation:qq.maps.MarkerAnimation.UP
                //设置显示Marker的地图
                map: map,
                //设置Marker可拖动
                draggable: true,
                //Marker的覆盖内容
                decoration: new qq.maps.MarkerDecoration("<font style='color:#fff;font-size:10px'>标记</font>")
                //自定义Marker图标为大头针样式
                icon: new qq.maps.MarkerImage(
                    "https://lbs.qq.com/doc/img/nilt.png"),
                //自定义Marker图标的阴影
                shadow: new qq.maps.MarkerImage(
                    "https://lbs.qq.com/doc/img/nilb.png"),
                //设置Marker标题，鼠标划过Marker时显示
                title: '测试',
                //设置Marker的可见性，为true时可见,false时不可见
                visible: true,
            });

        }
    </script>
    <div style="width:603px;height:300px" id="container"></div>
    <p>设置Marker的属性</p>
</body>

</html>

新窗口打开在线试一试