JavaScript API

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。

实例

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

<!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>

在线试一试

这篇文章对您解决问题是否有帮助？

已解决

未解决