高德地图之地图的属性

中英文设置

map.setLang('en'); 英文
map.setLang('zh_en'); 中英文对照
map.setLang('zh_cn'); 中文
复制代码

移动与缩放事件

map.on('moveend', logMapinfo);
map.on('zoomend', logMapinfo);
复制代码

获取地图层级与中心点

var zoom = map.getZoom(); // 获取当前地图级别
var center = map.getCenter(); // 获取当前地图中心位置
复制代码

设置地图层级与中心点

map.setCenter([lng, lat]); // 设置中心点
map.setZoom(zoom); // 设置地图层级
map.setZoomAndCenter(zoom, [lng, lat]); // 设置地图层级与中心点
复制代码

获取当前行政区

// 获取并展示当前城市信息
function logMapinfo () {
  /* 
    使用 map.getCity() 获取地图当前中心所在行政区
    回调函数的参数 info 对象拥有四个属性
    province, city, citycode 城市编码, district 区
    new PrettyJSON.view.Node() 接受一个参数对象渲染视图：
      el 指定渲染的元素,
      data 指定渲染的数据
   */
  map.getCity(function (info) {
    var node = new PrettyJSON.view.Node({
      el: document.querySelector('#map-city'),
      data: info
    });
    console.log(info);
  });
}
logMapinfo();
map.on('moveend', logMapinfo);
复制代码

设置地图当前行政区

map.setCity(城市名)

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;
复制代码

获取并设置边界坐标

• 获取

var bounds = map.getBounds();
document.querySelector('#ne').innerText = bounds.northeast.toString();
document.querySelector('#sw').innerText = bounds.southwest.toString();
复制代码

• 设置

// 通过 new AMap.Bounds(sourthWest:LngLat, northEast:lngLat)
// 或者 map.getBounds() 获得地图 Bounds 信息
var mybounds = new AMap.Bounds([116.319665, 39.855919], [116.468324,39.9756]);
map.setBounds(mybounds);
复制代码

限制地图显示范围

// 限制
map.setLimitBounds(bounds);
// 取消
map.clearLimitBounds(bounds);
复制代码

地图的平移

// 平移
map.panBy(50,  100);
// 移动到中心点
map.panTo([116.405467, 39.907761]);
复制代码

地图的交互

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
};
复制代码

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

获取鼠标点击经纬度

map.on('click', function (e) {
  document.getElementById('lnglat').value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
});
复制代码

转载于:https://juejin.im/post/5cce7df1f265da035e213777