高德地图markers生成和点击

Posted 2020-10-07 share水边

因为自己平时上班也是比较忙，遇到什么写什么，希望能给现在的你一些帮助，都是自己在工作中遇到的问题，给自己一个提醒，也是分享

相信很多人在做高德地图开发的时候，对于新手，官方的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的生成到点击事件，不要忘记我们都是用的函数，一定要进行函数的调用，你也可以根据自己的实际情况定义