高德地圖之地圖的屬性

MrNow發表於2019-05-05
地圖

中英文設定

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

相關文章