在已有地图上创建

在已有 AMap 地图上创建 Loca 图层。注意：Loca 依赖 JS API 最低版本为 1.4+。

源代码编辑器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>在已有地图上创建</title>
    <link rel="stylesheet" href="//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container" class="container">
</div>
<div class="input-card" style="width:auto">
    <h4>在已有的底图上加载</h4>
    <div id="btns">
        <div class="input-item">
            <button onclick="createVisualMap()" class="btn" style="width:100%;">加载 Loca 图层</button>
        </div>
    </div>
</div>
<script>
    delete window.AMap;
</script>
<script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script src="//webapi.amap.com/loca?v=1.2.0&key=您申请的key值"></script>
<script src="//a.amap.com/Loca/static/mock/districts.js"></script>
<script>
    // 已创建的 AMap 地图
    var amap = new AMap.Map('container', {
        mapStyle: 'amap://styles/twilight',
        features: ['bg', 'road'],
        zoom: 6,
        center: [114.644726, 33.553977],
        // AMap 底图 viewMode 默认为 2D，如需开启 3D 则需要显示指定
        // viewMode: '2D'
    });

    var loaded = false;

    function createVisualMap() {

        if (loaded) return;
        loaded = true;

        // 传入 AMap.Map 实例
        var map = Loca.create(amap);
        var layer = Loca.visualLayer({
            container: map,
            // 指定数据类型
            type: 'point',
            // 展示形状
            shape: 'circle'
        });

        layer.setData(districts, {
            // 指定经纬度所在字段
            lnglat: 'center'
        });

        layer.setOptions({
            style: {
                // 圆形半径
                radius: 20,
                // 填充颜色
                color: '#f3ad6a',
                // 描边颜色
                borderColor: '#5a6aff',
                // 描边宽度，单位像素
                borderWidth: 1,
                // 透明度
                opacity: 0.9
            }
        });

        layer.render();

    }
</script>
</body>
</html>

控制台

清空

返回顶部示例中心常见问题智能客服公众号
二维码