高德地图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的生成到点击事件，不要忘记我们都是用的函数，一定要进行函数的调用，你也可以根据自己的实际情况定义