标注和标注图层-文字标注

标注和标注图层。可添加图标，文字及图标和文字的展示。

源代码编辑器

<!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="https://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;
        }

        .title {
            position: absolute;
            top: 0;
            left: 50%;
            padding: 0.5em 1em;
            height: auto;
            border-radius: 2px;
            font-weight: 500;
            font-size: 20px;
            width: 307px;
            margin-left: -153px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="title" style="touch-action: none; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.5); font-size:
16px; transform: translate(0px, 10px);">全国累计确诊病例分布<span style="font-size: 14px;">（截止 3月30日）</span></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center-v2/mock_data/yiqing-data.js"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center-v2/mock_data/cities.js"></script>
<script>
var icon = {
   type: 'image',
   image: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png',
   size: [64, 30],
   anchor: 'center',
};
var textStyle = {
    fontSize: 12,
    fontWeight: 'normal',
    fillColor: '#fff',
    // fillColor: 'rgb(255, 215, 0)',
    // strokeColor: '#fff',
    // strokeWidth: 2,
    // fold: true,
    padding: '2, 5',
    backgroundColor: 'rgb(246,137,38)',
    borderColor: '#fff',
    borderWidth: 1,
};
var LabelsData = [
    {
        name: '自提点1',
        position: [116.461009, 39.991443],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 10,
        icon,
        text: {
            content: '中邮速递易',
            direction: 'right',
            offset: [-20, -5],
            style: textStyle
        }
    },
];
</script>
<script type="text/javascript">
    var map = new AMap.Map('container', {
        zoom: 4.5,
        center: [109.610747, 35.15261],
        viewMode: '3D',
        // pitch: 60,
        // mapStyle: 'amap://styles/whitesmoke',
        showIndoorMap: false,
        showLabel: false,
        // mapStyle: 'amap://styles/dark',
        mapStyle: 'amap://styles/fresh',
    });
    var bgImage = document.getElementById('bgImage');
    var bgCanvas;
    var bgCanvasCtx;

    var markers = [];
    var layer = new AMap.LabelsLayer({
        zooms: [3, 20],
        zIndex: 1000,
        collision: false,
        allowCollision: false,
    });
    layer.add(markers);
    // 图层添加到地图
    map.add(layer);

    var provinces = yiqingChinaData.provinces || [];
    var cityNames = [];
    var specialCity = ['北京', '上海', '天津', '重庆'];
    var colorLegend = {
      // 10: '#fde7a9',
      10: '#f9c02f',
      100: '#f5a54f',
      500: '#f18334',
      1000: '#cc5f42',
      5000: '#a94d36',
      100000: '#792a17',
    };

    // 初始化 labelMarker
    for (var provice of provinces) {
        var cities = provice.cities || [];

        if(specialCity.indexOf(provice.name) !== -1){
            var totalNumber = 0;
             for(const city of cities){
                 totalNumber += city.confirmedNum;
             }
             cities = [{
                 name: provice.name,
                 confirmedNum: totalNumber,
             }];
        }
        for(var city of cities){
            cityNames.push(city.name);
            var curCityData = findInCities(city.name);
            var number = city.confirmedNum;
            if(curCityData && number){
                var color = getColorByNumber(number);
                textStyle.backgroundColor = color;
                var marker = new AMap.LabelMarker({
                    name: city.name,
                    position: [curCityData.x, curCityData.y],
                    zIndex: number,
                    text: {
                        content: city.name + ': ' + city.confirmedNum,
                        direction: 'center',
                        style: textStyle,
                    }
                });
                markers.push(marker);
            }
        }
    }

    layer.add(markers);

    function findInCities(name){
        for(const city of citiesData){
            if(name === city.name){
                return city;
            }
        }
    }

    function getColorByNumber(number){
        var color;

        for(var key in colorLegend){
            if(colorLegend.hasOwnProperty(key)){
                if(number < parseInt(key)){
                    color = colorLegend[key];
                    break;
                }
            }
        }

        return color;
    }
</script>
</body>
</html>

控制台

清空

示例
中心常见
问题智能
客服

标注和标注图层-文字标注

标注和标注图层。可添加图标， 文字及图标和文字的展示。

标注和标注图层。可添加图标，文字及图标和文字的展示。