<!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" />
<link rel="stylesheet" href="https://at.alicdn.com/t/font_873139_0v65kqy674.css" >
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript" src="https://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>