高德地图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的生成到点击事件，不要忘记咱们都是用的函数，必定要进行函数的调用，你也能够根据本身的实际状况定义