高德地圖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的生成到點擊事件，不要忘記咱們都是用的函數，必定要進行函數的調用，你也能夠根據本身的實際狀況定義