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://open.map.qq.com/doc/img/nilt.png"),
        //自定义Marker图标的阴影
        shadow: new qq.maps.MarkerImage(
            "https://open.map.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://open.map.qq.com/doc/img/nilt.png"),
                //自定义Marker图标的阴影
                shadow: new qq.maps.MarkerImage(
                    "https://open.map.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>