标注和标注图层

标注和标注图层。可添加带文字的标注，支持海量点。支持与地图坐标避让。

源代码编辑器
复制
运行
还原
          <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>标注和标注图层</title>
    <link rel="stylesheet" href="http://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
            margin: 0;
        }
        .collision-btn.disable{
            background-image: none;
            color: lightgrey;
            border-color: lightgrey;
            cursor: not-allowed;
        }
        .collision-btn.disable:hover {
            background-color: #fff;
            border-color: lightgrey;
        }
        .input-card .btn{
            margin-right: .8rem;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="info">点击标注避让按钮，地图可以被marker避让了！</div>
<div class="input-card">
    <label style="color:grey">和地图标注避让设置</label>
    <div class="input-item">
        <input id="allowCollision" type="button" class="btn collision-btn" onclick="allowCollisionFunc()"
        value="标注避让Marker">
        <input id="notAllowCollision" type="button" class="btn collision-btn" onclick="notAllowCollisionFunc()" value="标注不避让Marker">
    </div>
</div>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script>
// 设置一个图标对象
var icon = {
   // 图标类型，现阶段只支持 image 类型
   type: 'image',
   // 图片 url
   image: 'http://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png',
   // 图片尺寸
   size: [64, 30],
   // 图片相对 position 的锚点，默认为 bottom-center
   anchor: 'center',
};
var textStyle = {
    fontSize: 12,
    fontWeight: 'normal',
    fillColor: '#22886f',
    strokeColor: '#fff',
    strokeWidth: 2,
    fold: true,
    padding: '2, 5',
};
var LabelsData = [
    {
        name: '自提点1',
        position: [116.461009, 39.991443],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 10,
        fold: true,
        icon,
        text: {
            // 要展示的文字内容
            content: '中邮速递易',
            // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
            direction: 'right',
            // 在 direction 基础上的偏移量
            offset: [-20, -5],
            // 文字样式
            style: {
                // 字体大小
                fontSize: 12,
                // 字体颜色
                fillColor: '#22886f',
                //
                strokeColor: '#fff',
                strokeWidth: 2,
                fold: true,
                padding: '2, 5',
            }
        }
    },
    {
        name: '自提点2',
        position: [116.466994, 39.984904],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 16,
        icon,
        text: {
            content: '丰巢快递柜-花家地北里',
            direction: 'right',
            offset: [-20, -5],
            style: textStyle
        }
    },
    {
        name: '自提点3',
        position: [116.472914, 39.987093],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 8,
        icon,
        text: {
            content: '丰巢快递柜-中环南路11号院',
            direction: 'right',
            offset: [-20, -5],
            style: textStyle
        }
    },
    {
        name: '自提点4',
        position: [116.471814, 39.995856],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 23,
        icon,
        text: {
            content: '丰巢快递柜-合生麒麟社',
            direction: 'right',
            offset: [-20, -5],
            style: textStyle
        }
    },
    {
        name: '自提点5',
        position: [116.469639, 39.986889],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 6,
        icon,
        text: {
            content: '速递易快递柜-望京大厦',
            direction: 'right',
            offset: [-20, -5],
            style: textStyle
        }
    },
    {
        name: '自提点6',
        position: [116.467361, 39.996361],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 5,
        icon,
        text: {
            content: 'E栈快递柜-夏都家园',
            direction: 'right',
            offset: [-20, -5],
            style: textStyle
        }
    },
    {
        name: '自提点7',
        position: [116.462327, 39.996071],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 4,
        icon,
        text: {
            content: '丰巢自提柜-圣馨大地家园',
            direction: 'right',
            offset: [-20, -5],
            style: textStyle
        }
    },
    {
        name: '自提点8',
        position: [116.462349, 39.996067],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 3,
        icon,
        text: {
            content: '丰巢快递-圣馨大地家园',
            direction: 'right',
            offset: [-20, -5],
            style: textStyle
        }
    },
    {
        name: '自提点9',
        position: [116.456474, 39.991563],
        zooms: [10, 20],
        zIndex: 2,
        opacity: 1,
        icon,
        text: {
            content: 'E栈快递柜-南湖渠西里',
            direction: 'right',
            offset: [-20, -5],
            style: textStyle
        }
    }
];
</script>
<script type="text/javascript">
    var map = new AMap.Map('container', {
        zoom: 15.8,
        center: [116.469881, 39.993599],
        showIndoorMap: false,
    });

    var markers = [];
    var allowCollision = false;
    var layer = new AMap.LabelsLayer({
    zooms: [3, 20],
    zIndex: 1000,
    // collision: false,
    // 设置 allowCollision：true，可以让标注避让用户的标注
    allowCollision,
});
    layer.add(markers);
    // 图层添加到地图
    map.add(layer);

    // 初始化 labelMarker
    for (var i = 0; i < LabelsData.length; i++) {
        var curData = LabelsData[i];
        curData.extData = {
            index: i
        };

        var labelMarker = new AMap.LabelMarker(curData);

        markers.push(labelMarker);

    }
    // 将 marker 添加到图层
    layer.add(markers);

    map.setFitView(null, false, [100, 150, 10,10]);

    toggleBtn();

    function allowCollisionFunc(){
        allowCollision = true;
        layer.setAllowCollision(true);
        toggleBtn();
    }

    function notAllowCollisionFunc(){
        allowCollision = false;
        layer.setAllowCollision(false);
        toggleBtn();
    }

    function toggleBtn(){
        var allowCollisionBtn = document.getElementById('allowCollision');
        var notAllowCollisionBtn = document.getElementById('notAllowCollision');
        var disableClass = 'disable';

        if(allowCollision){
            allowCollisionBtn.classList.add(disableClass);
            notAllowCollisionBtn.classList.remove(disableClass);
        }else {
            allowCollisionBtn.classList.remove(disableClass);
            notAllowCollisionBtn.classList.add(disableClass);
        }
    }
</script>
</body>
</html>
        
控制台
清空
示例
中心常见
问题智能
客服