使用 AMapLoader 加载 AMapUI

AMapJSAPILoaderhtml,body,#container{height:100%;width:100%;m

源代码编辑器
复制
运行
还原
          <!doctype html>
<html lang="en">
<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>AMap JSAPI Loader</title>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="container" tabindex="0"></div>
<script src="//a.amap.com/Loca/static/mock/districts.js"></script>
<script src="http://webapi.amap.com/loader.js"></script>
<script>
    AMapLoader.load({ //首次调用 load
        key:'您申请的key值',//首次load key为必填
        version:'2.0',
      	AMapUI: {
            version: '1.1',
            plugins:['overlay/SimpleMarker']
        }
    }).then((AMap)=>{
        map = new AMap.Map('container',{
            zoom: 4,
        });

        var lngLats = getGridLngLats(map.getCenter(), 5, 5);

        new AMapUI.SimpleMarker({
            iconLabel: '1',
            //自定义图标地址
            iconStyle: '//webapi.amap.com/theme/v1.3/markers/b/mark_r.png',

            //设置基点偏移
            offset: new AMap.Pixel(-19, -60),

            map: map,

            showPositionPoint: true,
            position: lngLats[0],
            zIndex: 100
        });

        new AMapUI.SimpleMarker({
            iconLabel: '2',
            //自定义图标节点(img)的属性
            iconStyle: {

                src: '//webapi.amap.com/theme/v1.3/markers/b/mark_b.png',
                style: {
                    width: '20px',
                    height: '30px'
                }
            },

            //设置基点偏移
            offset: new AMap.Pixel(-10, -30),

            map: map,
            showPositionPoint: true,
            position: lngLats[1],
            zIndex: 200
        });

        new AMapUI.SimpleMarker({
            iconLabel: '3',
            //自定义图标节点(img)的属性
            iconStyle: {

                src: '//webapi.amap.com/theme/v1.3/markers/b/mark_b.png',
                style: {
                    width: '20px',
                    height: '60px'
                }
            },

            //设置基点偏移
            offset: new AMap.Pixel(-10, -60),

            map: map,
            showPositionPoint: true,
            position: lngLats[2]
        });

        new AMapUI.SimpleMarker({
            iconLabel: '4',
            //直接设置html(需要以"<"开头并且以">"结尾)
            iconStyle: '<div style="background:red;width:20px;height:60px;"></div>',

            //设置基点偏移
            offset: new AMap.Pixel(-10, -60),

            map: map,
            showPositionPoint: true,
            position: lngLats[3]
        });

        new AMapUI.SimpleMarker({
            iconLabel: '5',
            //直接使用dom节点
            iconStyle: document.getElementById('myIcon'),

            //设置基点偏移
            offset: new AMap.Pixel(-10, -60),

            map: map,
            showPositionPoint: true,
            position: lngLats[4]
        });
    });

    /**
     * 返回一批网格排列的经纬度

     * @param  {AMap.LngLat} center 网格中心
     * @param  {number} colNum 列数
     * @param  {number} size  总数
     * @param  {number} cellX  横向间距
     * @param  {number} cellY  竖向间距
     * @return {Array}  返回经纬度数组
     */
    function getGridLngLats(center, colNum, size, cellX, cellY) {

        var pxCenter = map.lnglatToPixel(center);

        var rowNum = Math.ceil(size / colNum);

        var startX = pxCenter.getX(),
            startY = pxCenter.getY();

        cellX = cellX || 70;

        cellY = cellY || 70;


        var lngLats = [];

        for (var r = 0; r < rowNum; r++) {

            for (var c = 0; c < colNum; c++) {

                var x = startX + (c - (colNum - 1) / 2) * (cellX);

                var y = startY + (r - (rowNum - 1) / 2) * (cellY);

                lngLats.push(map.pixelToLngLat(new AMap.Pixel(x, y)));

                if (lngLats.length >= size) {
                    break;
                }
            }
        }
        return lngLats;
    }
   
</script>
</body>
</html>
        
控制台
清空
示例
中心常见
问题智能
客服