“测试页面”的版本间差异

来自珠海交通维基
跳到导航 跳到搜索
第2行： 第2行：
 
==图片标注测试==
 
==图片标注测试==
  
−
测试时间：{{#time: Y-m-d }}
+
<!-- 重点参数：awesomeIcon -->
−
<html>
+
<!doctype html>
−
<img src="http://ww3.sinaimg.cn/mw690/9f04c19egw1f0c3piphrvj21kw15p132.jpg" border="0" usemap="#planetmap" alt="Planets" />
+
<html lang="zh-CN">
 +
 
 +
<head>
 +
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/overlay/AwesomeMarker/examples/index.html -->
 +
    <base href="//webapi.amap.com/ui/1.0/ui/overlay/AwesomeMarker/examples/" />
 +
    <meta charset="utf-8">
 +
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
 +
    <title>设置awesomeIcon</title>
 +
    <style>
 +
    html,
 +
    body,
 +
    #container {
 +
        width: 100%;
 +
        height: 100%;
 +
        margin: 0px;
 +
    }
 +
    </style>
 +
</head>
 +
 
 +
<body>
 +
    <div id="container"></div>
 +
    <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.10&key=您申请的key值'></script>
 +
    <!-- UI组件库 1.0 -->
 +
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
 +
    <script type="text/javascript">
 +
    //创建地图
 +
    var map = new AMap.Map('container', {
 +
        zoom: 4
 +
    });
 +
 
 +
    AMapUI.loadUI(['overlay/AwesomeMarker'],
 +
        function(AwesomeMarker) {
 +
 
 +
            //icon的取值请见  http://fontawesome.io/icons/
 +
            var awIcons = [
 +
                'address-book',
 +
                'address-book-o',
 +
                'address-card',
 +
                'address-card-o',
 +
                'adjust',
 +
                'american-sign-language-interpreting',
 +
                'anchor',
 +
                'archive',
 +
                'area-chart',
 +
                'arrows',
 +
                'arrows-h',
 +
                'arrows-v',
 +
                'asl-interpreting',
 +
                'assistive-listening-systems',
 +
                'asterisk'
 +
            ];
 +
 
 +
            //获取一批grid排布的经纬度
 +
            var lngLats = getGridLngLats(map.getCenter(), 5, awIcons.length);
 +
 
 +
            for (var i = 0, len = lngLats.length; i < len; i++) {
 +
 
 +
                new AwesomeMarker({
 +
 
 +
                    //设置awesomeIcon
 +
                    awesomeIcon: awIcons[i],
 +
 
 +
                    iconLabel: {
 +
                        style: {
 +
                            color: '#333',
 +
                            fontSize: '14px'
 +
                        }
 +
                    },
 +
                    iconStyle: 'orange',
 +
 
 +
                    map: map,
 +
                    position: lngLats[i],
 +
                    title: 'awesomeIcon :' + awIcons[i]
 +
 
 +
                });
 +
 
 +
            }
 +
 
 +
        });
 +
 
 +
    /**
 +
    * 返回一批网格排列的经纬度
 +
 
 +
    * @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>
  
−
<map name="planetmap" id="planetmap">
 
−
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
 
−
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
 
−
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
 
−
</map>
 
 
</html>
 
</html>
−
 
  
 
{{Special:RecentChanges/days=1,limit=5}}
 
{{Special:RecentChanges/days=1,limit=5}}

2018年9月14日 (五) 15:05的版本

Test.png

ZBC wiki温馨提示：
本词条是测试词条，未对外开放。
词条内容仅供测试使用，不反映现实情况。
如果您是错误地进入了此页面，请点击您的浏览器的返回按钮。

图片标注测试

<!doctype html> 设置awesomeIcon

缩写列表：
新
该编辑创建了新页面（见新页面列表）
小
该编辑为小编辑
机
该编辑由机器人执行
(±123)
该页面字节数的前后变化

2024年10月6日 (星期日)

     14:05  模板:香洲分公司配车表‎ 差异历史 +6‎ ZCL 讨论 贡献 标签：高级移动端编辑 移动版编辑 移动网页编辑
     09:43  模板:金湾分公司配车表‎ 差异历史 -6‎ ZCL 讨论 贡献

2024年10月5日 (星期六)

     20:21  珠海公交502路线‎ 差异历史 +43‎ ZCL 讨论 贡献 →‎图库 标签：高级移动端编辑 移动版编辑 移动网页编辑
取自“https://w.zhbus.org/index.php?title=测试页面&oldid=10455”