高德地圖markers生成和點擊

因為自己平時上班也是比較忙，遇到什么寫什么，希望能給現在的你一些幫助，都是自己在工作中遇到的問題，給自己一個提醒，也是分享，相信很多人在做高德地圖開發的時候，對於新手，官方的demo解讀單個marker的生成還是很簡單的，我記得官方給多了很多生成點樣式的各個講解，所以今天也是跟大家分析關系markers的生成和點擊事件

首先，要知道生成marker的重要關鍵在於，經緯度，也就是Longitude和Latitude，生成多個marker，那肯定就是擁有多個Longitude和Latitude，這些都比較好理解，其次，就是關於顯示的問題，我們所展示的圖標或者圖片是否相同那么這里邏輯就非常的簡單了，我們可以通過循環來達到我們的效果，好的，邏輯我們理清楚后，就直接上代碼

//展示根據獲取的經緯度得到多個車位的展示
    function iJuhe(){
//定義一個markers數組
        var markers=[];
//通過循環來循環出我們要的經緯度
        for (var i = 0;i < result.length; i++) {
            var Longitude=Number(result[i].Longitude);
            var Latitude=Number(result[i].Latitude);
            var marker= undefined;
//將我們要的經緯對應生成一個marker
            marker = new AMap.Marker({
                map:map,
                position:[Longitude,Latitude],
                icon: new AMap.Icon({
                    size: new AMap.Size(22, 28.5),
                }),
                offset: new AMap.Pixel(-5,-38),
                clickable : true ,
//這個地方我們可以加可以不加，這是在圖標的中心點加上我們想要的文字，中心點
                content: '<div class="marker-route marker-marker-bus-from">'+文字+'</div>'
            });
//這里大家一定要注意，如果不將marker，push到markers里面，你生成的永遠都只是一個marker，地圖上也只是展示一個
            markers.push(marker);

        }

        markerrender(markers);
    }

//多個markers點擊事件

    function markerrender(markers) {
        console.log(markers);
        for (let i=0;i<markers.length;i++){
            AMap.event.addListener(markers[i],"click",function () {
               //markers的點擊事件就看大家是想定義什么事件了，我這里是有進行一個彈窗的展示，出現的彈窗展示當前marker的信息，那么這就不是討論的重點了，如果有疑問大家可以發信息給我
                $(".tan").css('display', 'block');
                $(".search").css('display', 'none');
//這里我用了一個本地保存信息，進行頁面的一些數據保存交互，大家可以根據自己具體的事件定義
                local(result[i]);
            });

        }
    }
//我自己的demo這個位置后面是有進行彈窗展示的效果的，有興趣的可以聯系我分享源碼

那么。這就是markers的生成到點擊事件，不要忘記我們都是用的函數，一定要進行函數的調用，你也可以根據自己的實際情況定義