WebGIS第六課：地圖點選事件的引入和點标記

# 1 事件

如何通過點選事件來擷取目前位置的經緯度？

可以通過事件來實作。

先上代碼：這裡有坑。

// 監聽地圖點選事件
        map.on('click',function(event){
            console.log(event)
            console.log(`經度：${event.lnglat.lng},緯度：${event.lnglat.lat}`)
        })
           

通過綁定click事件實作監聽函數，這裡注意：在控制台列印時候，字元串居然用的是·符号，就是1左邊那個按鍵。否則是不對的。

看一下效果：

這就實作了在控制台輸出經緯度的操作。

# 2 點标記

下面來看一下點标記。

點标記可以了解為地圖覆寫物。會用一個圖形來表示。根據經緯度去建立marker，這就是點标記，然後再添加到地圖上就可以，現在把他做成互動式的。

首先基于坐标來繪制點。

代碼：

// 添加點
        // 建立marker對象
        var marker = new AMap.Marker({
            position: new AMap.LngLat(114.255025,30.62157)
        })
        // 添加到地圖
        map.add(marker)
           

上面的例子，隻能是先指定經緯度畫點，我們也可以結合地圖事件達到實時點選畫點，效果如下：

 實作代碼：

// 監聽地圖點選事件
        map.on('click',function(event){
            // console.log(event)
            // console.log(`經度：${event.lnglat.lng},緯度：${event.lnglat.lat}`)

        // 建立marker對象
        var marker = new AMap.Marker({
            position: event.lnglat,
        })
        // 添加到地圖
        map.add(marker)


        })
           

 這樣就可以點選一次，添加一個marker進來。可以添加很多個點标記。

事實上，點标記是可以很靈活的，比如标記一個地物，鑽孔，建築物等。比如下面的天壇的地物标記。就可以做的很漂亮。