webapp-地圖

webapp-地圖

高德地圖

• 個人第一個地圖應用

  • 註冊帳號並申請key
  • 準備頁面
  • 建立地圖應用

  var map = new AMap.Map("container", {
        zoom: 11,//級別
      }) 
  
      // console.log(map.getZoom())
      // console.log(map.getCenter().toString())
  
      map.on('moveend',function () {
        console.log(map.getZoom())
        console.log(map.getCenter().toString())
      })
  
    //  每次移動結束
      map.on('zoomend', function () {
          console.log(map.getZoom())
          console.log(map.getCenter().toString())
        })
    // 級別改變觸發

  // 設置地圖的層級
  
  btn.onclick = function () {
    map.setZoom(zoomVal.value)
  }

  zoom 的數字越大 顯示的越精細 越小顯示的範圍越大 setZoom 手動設置級別

設置地圖的中心點

// 設置地圖的層級

btn.onclick = function () {
    map.setZoom(xNode.value,yNode.value)
}

既能設置zoom和center的方法

btn.onclick = function () {
    map.setZoomAndCenter(12,[121,20])
}

獲取當前行政區

// 這是一個異步操做
map.getCity(function (info) {
    console.log(info)
})

設置當前行政區

btn.onclick = function() {
    map.setCity(cityNode.value)
}

設置當下的行政區，map.setCity('字符串') 想要到達的中心點

獲取地圖顯示範圍

console.log(map.getBounds)

獲取 地圖範圍 .getBounds().northeast // 右上角座標，.getBounds().northeast // 左下角座標

設置地圖顯示範圍

var myBounds = new AMap.Bounds([116,23],[123,52])
map.setBounds(myBounds)

不是特別精準

限制地圖顯示範圍

var bounds = map.getBounds()
bounds.northeast.R = 118

map.setLimitBounds()
map.clearLimitBounds()

地圖的平移

setInterval(() => {
    map.panBy(50,300*Math.random())
}, 3000);

setTimeout(() => {
    map.panTo([120,23])
}, 3000);

地圖的平移， panBy(x,y) 和 panTo(x,y) x表明向左平移多少像素 / y表明向上平移多少像素

獲取鼠標的經緯度

map.on('click',function (e) {
    console.log(e)
})

longitude 經度

latitude 緯度

map.on('click',function (e) {
    console.log(e.lnglat.lat, e.lnglat.lng)
})

獲取鼠標的經緯度，利用事件對象

設置鼠標的樣式

map.setDefaultCursor('pointer')

值選項：不少！

地圖搜索

• 地圖搜索

  輸入提示

  AMap.plugin("AMap.Autocomplete",function() {
    new AMap.Autocomplete().search("要搜索的地點",function(status,data) {
        console.log(data) //搜索出來的數據
    }) 
  })

  在加載的key後面加上你想加上的插件！

  如下簡潔寫法

  new AMap.Autocomplete({
    input: 'searchText'
  })

• 添加標記

• 縮放比例尺控件

• 地圖類型轉換

如何知道地圖加載完成？

AMap.plugin('AMap.Autocomplete',function () {
    new AMap.Autocomplete().search("北京",function(status,data) {
        console.log(data)
    })
})

POI

興趣點

AMap.service(['AMap.PlaceSearch'],function() {
            new AMap.PlaceSearch({
                city:'0550', // 搜索城市
                map:map, // 地圖對象
                panel:"setCenterNode" ,//在哪一個容器中顯示
                pageSize: 5,//控制頁數顯示的條數
                pageIndex: 1, //默認顯示的頁數
                cityLimit: true, // 限定城市顯示
            }).search('電影院') // 搜索關鍵詞
        })

先添加一個服務，而後在函數裏建立服務並配置參數！ 圖片想要出來必須在服務器下！

var palceSearch = new AMap.PlaceSearch({
            map: map
        })
        
        AMap.event.addListener(search,'select', function(e)  {
            console.log(e)
            palceSearch.search(e.poi.name)
        }) // 給地圖添加事件