高德地图 JS API （地图/地图属性）

太叔天宇

2023-12-01

写在前面：

开发工具使用HBuilder，只需要将key替换成您申请的key值，代码即可直接使用。

1，中、英文地图

<!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" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <div class="input-card" style="width:13rem">
    <h4>底图语言切换</h4>
    <div id="lang">
      <div class="input-item"><input id="en" name="language" type="radio"><span class="input-text">英文底图</span></div>
      <div class="input-item"><input id="zh_en" name="language" type="radio"><span class="input-text">中英文对照</span></div>
      <div class="input-item"><input id="zh_cn" name="language" type="radio" checked="checked"><span class="input-text">中文底图</span></div>
    </div>
  </div>
  <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
  <script>
    //初始化地图
    var map = new AMap.Map('container', {
      resizeEnable: true,
      center: [121.498586, 31.239637],
      zoom: 20,
      lang: "zh_cn" //可选值：en，zh_en, zh_cn
    });

    //绑定radio点击事件
    var radios = document.querySelectorAll("#lang input");
    radios.forEach(function(radio) {
      radio.onclick = setLang;
    });

    function setLang() {
      map.setLang(this.id);
    }
  </script>
</body>

</html>

2，获取地图中心点/级别

<!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">
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }

    #map-zoom, #map-center {
      color: #0288d1;
    }
  </style>
  <title>地图级别与中心点</title>
</head>

<body>
  <div id="container"></div>
  <div class="info">
    <h4>获取地图级别与中心点坐标</h4>
    <p>当前级别：<span id="map-zoom">11</span></p>
    <p>当前中心点：<span id="map-center">121.498586,31.239637</span></p>
  </div>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script>
    //初始化地图
    var map = new AMap.Map('container', {
      resizeEnable: true, //是否监控地图容器尺寸变化
      zoom: 11, //初始地图级别
      center: [121.498586, 31.239637], //初始地图中心点
    });

    //显示地图层级与中心点信息
    function logMapinfo(){
      var zoom = map.getZoom(); //获取当前地图级别
      var center = map.getCenter(); //获取当前地图中心位置

      document.querySelector("#map-zoom").innerText = zoom;
      document.querySelector("#map-center").innerText = center.toString();
    };

    //绑定地图移动与缩放事件
    map.on('moveend', logMapinfo);
    map.on('zoomend', logMapinfo);
  </script>
</body>

</html>

3，设置地图中心点/级别

<!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">
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
  <title>设置地图级别与中心点</title>
</head>

<body>
  <div id="container"></div>

  <div class="input-card" style="width:24rem">
    <h4>设置地图中心点</h4>
    <div class="input-item">
      <button id="random-zoom-btn" class="btn">随机地图层级 setZoom</button>
    </div>
    <div class="input-item">
      <button id="random-center-btn" class="btn">随机地图中心点 setCenter</button>
    </div>
    <div class="input-item">
      <button id="random-zoomcenter-btn" class="btn">随机地图层级与中心点 setZoomAndCenter</button>
    </div>
  </div>

  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script>
    //初始化地图
    var map = new AMap.Map('container', {
      resizeEnable: true, //是否监控地图容器尺寸变化
      zoom: 12, //初始地图级别
      center: [121.498586, 31.239637], //初始地图中心点
      showIndoorMap: false //关闭室内地图
    });

    //绑定按钮事件，改变地图层级
    document.querySelector("#random-zoom-btn").onclick = function() {
      var zoom = Math.floor(Math.random() * 7) + 11; //zoom范围[11,18]
      map.setZoom(zoom); //设置地图层级
      log.info(`当前层级已设为${zoom}级`);
    }

    //绑定按钮事件，改变地图中心点
    document.querySelector("#random-center-btn").onclick = function() {
      var lng = 121.138398 + Math.floor(Math.random() * 589828) / 1e6; //经度范围[121.138398, 121.728226]
      var lat = 30.972688 + Math.floor(Math.random() * 514923) / 1e6; //纬度范围[30.972688, 31.487611]
      map.setCenter([lng, lat]); //设置地图中心点
      log.info(`当前中心点已设为 ${lng.toFixed(6)},${lat.toFixed(6)}`);
    }

    //绑定按钮事件，改变地图层级与中心点
    document.querySelector("#random-zoomcenter-btn").onclick = function() {
      var zoom = Math.floor(Math.random() * 7) + 11;
      var lng = 121.138398 + Math.floor(Math.random() * 589828) / 1e6;
      var lat = 30.972688 + Math.floor(Math.random() * 514923) / 1e6;
      map.setZoomAndCenter(zoom, [lng, lat]); //同时设置地图层级与中心点
      log.info(`当前层级已设为${zoom}级，中心点已设为 ${lng.toFixed(6)},${lat.toFixed(6)}`);
    }
  </script>
</body>

</html>

4，获取当前行政区域

<!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">
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <link rel="stylesheet" type="text/css" href="https://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css">
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
  <title>获取地图当前行政区</title>
</head>

<body>
  <div id="container"></div>
  <div class="info">
    <h4>当前所在行政区信息</h4>
    <p><span id="map-city"></span></p>
  </div>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
  <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js" ></script>
  <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js" ></script>
  <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js" ></script>
  <script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
  <script>
    //初始化地图
    var map = new AMap.Map('container', {
      resizeEnable: true, //是否监控地图容器尺寸变化
      zoom: 11, //初始地图级别
    });

    //获取并展示当前城市信息
    function logMapinfo(){
      map.getCity( function(info){
        var node = new PrettyJSON.view.Node({
            el: document.querySelector("#map-city"),
            data: info
        });
      });
    }

    logMapinfo();

    //绑定地图移动事件
    map.on('moveend', logMapinfo);
  </script>
</body>

</html>

5，设置当前行政区域

<!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" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <div class="input-card" style="width:24rem;">
    <h4>设置地图当前行政区</h4>
    <div class="input-item">
      <input id='city-name' placeholder="北京市" type="text" style="margin-right:1rem;"><button class="btn" id="query">去指定城市</button>
    </div>
  </div>

  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script>
    var map = new AMap.Map('container', {
      resizeEnable: true,
      center: [116.405285,39.904989]
    });

    //根据cityname、adcode、citycode设置地图位置
    function gotoCity() {
      var val = document.querySelector('#city-name').value; //可以是cityname、adcode、citycode
      if (!val) {
        val = "北京市";
      }
      map.setCity(val);
      log.info(`已跳转至${val}`);
    }

    //绑定查询点击、回车事件
    document.querySelector('#query').onclick = gotoCity;
    document.querySelector('#city-name').onkeydown = function(e) {
      if (e.keyCode === 13) {
        gotoCity();
        return false;
      }
      return true;
    };
  </script>
</body>

</html>

6，设置/获取地图显示范围

<!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" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }

    .lnglat {
      color: #0288d1;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <div class="info">
    <h4>当前地图显示范围（Bounds）</h4>
    <p>NorthEast坐标：<span id="ne" class="lnglat"></span></p>
    <p>SouthWest坐标：<span id="sw" class="lnglat"></span></p>
  </div>
  <div class="input-card" style="width:16rem;">
    <h4>控制地图显示范围</h4>
    <div class="input-item">
      <button class="btn" id="reset-bounds">指定地图显示范围</button>
    </div>
  </div>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script>
    //创建地图
    var map = new AMap.Map('container', {
      resizeEnable: true,
      zoom: 10,
      center: [116.405285, 39.904989],
      showIndoorMap: false
    });

    //显示当前地图边界范围坐标
    function logMapBounds() {
      var bounds = map.getBounds();
      document.querySelector("#ne").innerText = bounds.northeast.toString();
      document.querySelector("#sw").innerText = bounds.southwest.toString();
    }

    logMapBounds();

    //绑定地图移动与缩放事件
    map.on('moveend', logMapBounds);
    map.on('zoomend', logMapBounds);

    //绑定按钮事件
    document.querySelector("#reset-bounds").onclick = function() {
      //通过 new AMap.Bounds(southWest:LngLat, northEast:LngLat) 或者 map.getBounds() 获得地图Bounds信息
      var mybounds = new AMap.Bounds([116.319665, 39.855919], [116.468324,39.9756]);
      map.setBounds(mybounds);
    }
  </script>
</body>

</html>

7，限制地图显示范围

<!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" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }

    .lnglat {
      color: #0288d1;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <div class="info">
    <h4>地图限制区域信息</h4>
    <p>NorthEast坐标：<span id="ne" class="lnglat"></span></p>
    <p>SouthWest坐标：<span id="sw" class="lnglat"></span></p>
  </div>
  <div class="input-card" style="width:14rem;">
    <h4>限制地图显示范围</h4>
    <div class="input-item">
      <button class="btn" id="lock-bounds">限定地图显示范围</button>
    </div>
    <div class="input-item">
      <button class="btn" id="unlock-bounds">取消地图显示限制</button>
    </div>
  </div>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script>
    //创建地图
    var map = new AMap.Map('container', {
      resizeEnable: true,
      zoom: 11,
      showIndoorMap: false
    });

    function logMapInfo() {
      var limitBounds = map.getLimitBounds();
      if (limitBounds) {
        document.querySelector("#ne").innerText = limitBounds.northeast.toString();
        document.querySelector("#sw").innerText = limitBounds.southwest.toString();
      } else {
        document.querySelector("#ne").innerText = document.querySelector("#sw").innerText = "未限定";
      }
    }

    //限制地图显示范围
    function lockMapBounds() {
      var bounds = map.getBounds();
      map.setLimitBounds(bounds);
      logMapInfo();
    }

    //取消地图显示限制
    function unlockMapBounds() {
      map.clearLimitBounds();
      logMapInfo();
    }

    //启用地图范围限定
    lockMapBounds();
    logMapInfo();

    //绑定按钮事件
    document.querySelector("#lock-bounds").onclick = lockMapBounds;
    document.querySelector("#unlock-bounds").onclick = unlockMapBounds;
  </script>
</body>

</html>

8，地图的平移

<!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" />
    <script 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>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
    }
  </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: auto">
    <div class="input-item">
        <input id="piexBtn" type="button" class="btn" value="平移像素值：(50,100)"/>
    </div>
    <div class="input-item">
        <input id="pantoBtn" type="button" class="btn" value="地图中心点平移至：(116.405467,39.907761)"/>
    </div>
</div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 13,
        center: [116.397428, 39.90923]
    });

    AMap.event.addDomListener(document.getElementById('piexBtn'), 'click', function() {
        map.panBy(50, 100);
    });
    AMap.event.addDomListener(document.getElementById('pantoBtn'), 'click', function() {
        map.panTo([116.405467, 39.907761]);
    });
</script>
</body>
</html>

9，交互控制

<!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" type="text/css" href="https://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css">
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <div class="info">
    <h4>当前地图状态（Status）</h4>
    <p><span id="map-status"></span></p>
  </div>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js"></script>
  <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js"></script>
  <script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
  <script>
    var mapOpts = {
      showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
      resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
      dragEnable: false, // 地图是否可通过鼠标拖拽平移，默认为true
      keyboardEnable: false, //地图是否可通过键盘控制，默认为true
      doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
      zoomEnable: false, //地图是否可缩放，默认值为true
      rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
    }

    //获取并展示地图状态信息
    function logMapOptions() {
      var node = new PrettyJSON.view.Node({
        el: document.querySelector("#map-status"),
        data: mapOpts
      });
    }

    logMapOptions();

    //创建地图
    var map = new AMap.Map('container', mapOpts);

    //通过map.setStatus方法动态设置地图状态
    /**
    map.setStatus({
      dragEnable: true,
      keyboardEnable: true,
      doubleClickZoom: true,
      zoomEnable: true,
      rotateEnable: true
    });
    */

  </script>
</body>

</html>

10，获取鼠标点击经纬度

<!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" />
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<style type="text/css">
    html,body{
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    .map{
        height: 100%;
        width: 100%;
        float: left;
    }
</style>
<body>
<div id="container" class="map"></div>
<div class="input-card">
    <h4>左击获取经纬度：</h4>
    <div class="input-item">
      <input type="text" readonly="true" id="lnglat">
    </div>
</div>

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Autocomplete"></script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    map.on('click', function(e) {
        document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
    });
    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        if (e.poi && e.poi.location) {
            map.setZoom(15);
            map.setCenter(e.poi.location);
        }
    }
</script>
</body>
</html>

11，地图的热点

<!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" />
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0px;
        }
        .map{
            height: 100%;
            width: 100%;
            float: left;
        }
        .info-title{
            font-weight: bolder;
            color: #fff;
            font-size: 14px;
            line-height: 26px;
            padding: 0 0 0 6px;
            background: #25A5F7
        }
        .info-content{
            padding: 4px;
            color: #666666;
            line-height: 23px;
            font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
        }
        .info-content img{
            float: left;
            margin: 3px;
        }
        .amap-info-combo .keyword-input {
            height: auto;
        }
    </style>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container" class="map"></div>
<div id="tip">鼠标悬停热点试试</div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13,
        isHotspot: true
    });
    var placeSearch = new AMap.PlaceSearch();  //构造地点查询类
    var infoWindow=new AMap.AdvancedInfoWindow({});
    map.on('hotspotover', function(result) {
        placeSearch.getDetails(result.id, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                placeSearch_CallBack(result);
            }
        });
    });
    //回调函数
    function placeSearch_CallBack(data) { //infoWindow.open(map, result.lnglat);
        var poiArr = data.poiList.pois;
        var location = poiArr[0].location;
        infoWindow.setContent(createContent(poiArr[0]));
        infoWindow.open(map,location);
    }
    function createContent(poi) {  //信息窗体内容
        var s = [];
        s.push('<div class="info-title">'+poi.name+'</div><div class="info-content">'+"地址：" + poi.address);
        s.push("电话：" + poi.tel);
        s.push("类型：" + poi.type);
        s.push('<div>');
        return s.join("<br>");
    }
</script>
</body>
</html>

12，设置鼠标样式

<!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>

高德地图 JS API （地图/地图属性）

相关阅读

相关文章

相关问答

相关文档