高德地圖之地圖的屬性

中英文設置

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();
});
複製代碼