设置鼠标样式

使用Map.setDefaultCursor设置地图默认的鼠标样式，用于自定义地图等场景。

源代码编辑器

复制

运行

还原

          <!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" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_873139_0v65kqy674.css" >
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            margin: 0px;
        }
        .map{
            height: 100%;
            width: 100%;
            float: left;
        }
        .input-card {
            width: 70px;
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
</head>
<body>
<div id="container" class="map"></div>
<ul id="cursorList" class="input-card">
    <li>
        <input name="cursor" value="default" type="radio" onclick="switchCursor(this)" checked>
        <span class="iconfont icon-Cursor"></span>
    </li>
    <li>
        <input name="cursor" value="pointer" type="radio" onclick="switchCursor(this)">
        <span class="iconfont icon--Hand-Cursor"></span>
    </li>
    <li>
        <input name="cursor" value="move" type="radio" onclick="switchCursor(this)">
        <span class="iconfont icon-cursor-move"></span>
    </li>
    <li>
        <input name="cursor" value="crosshair" type="radio" onclick="switchCursor(this)">
        <span class="iconfont icon-cross"></span>
    </li>
</div>
<script type="text/javascript">
    //初始化地图对象，加载地图
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    
    //使用CSS默认样式定义地图上的鼠标样式
    map.setDefaultCursor("pointer");
    
    
    //自定义鼠标样式图标
    function switchCursor(target) {
        var value = target.value;
        map.setDefaultCursor(value);
    }
</script>
</body>
</html>
        

控制台

清空

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