javascript - 根据 id 切换谷歌地图标记

Question

我有一个通过 for 循环 显示标记的 map 。

function map_view_initialize() {
        var properties = <?php echo is_array($properties) ? json_encode($properties) : $properties; ?>;
        var index;
        var mapOptions = {
            center: {lat: 32.752601, lng: 9.801254},
            zoom: 12,
        };

        var map = new google.maps.Map(document.getElementById('map_view_canvas'),
                mapOptions);
        infowindow = new google.maps.InfoWindow();
        for (var index = 0; index < properties.length; index++) {

            var latlng = new google.maps.LatLng(properties[index].property_latitude, properties[index].property_longitude);
            var agent = properties[index].agent_firstname + ' ' + properties[index].agent_lastname;
            var propertyName = properties[index].property_name;
            var agentId = properties[index].agent_id;
            var propertyLocation = properties[index].location_name;
            var owner = properties[index].owner_firstname + ' ' + properties[index].owner_lastname;
            var ownerTel = properties[index].owner_telephone_number;
            var markerContent = "<div><h4>" + propertyName + "</h4>\n\
            <h5>Location: " + propertyLocation + "</h5>\n\
            <p>" + owner + " " + ownerTel + "</p>\n\
            </div>";

            var marker = new MarkerWithLabel({
                agent:agentId,
                position: latlng,
                map: map,
                labelContent: agent,
                labelAnchor: new google.maps.Point(22, 0),
                labelClass: "labels",
                labelStyle: {opacity: 0.75}
            });

            marker.content = markerContent;

            var infoWindow = new google.maps.InfoWindow();
            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent(this.content);
                infoWindow.open(this.getMap(), this);
            });
        }
 }

我还有一组与每个标记的 agentId 属性相关的按钮。

@foreach($agents as $agent)
   <button id="{{$agent->person_id}}" onclick="filterMarkers(this.id);" type='button' class='btn btn-success btnMargin btn-xs'>{{$agent->agent_lastname}} {{$agent->agent_firstname}}</button>          
@endforeach  

当我按下其中一个按钮时，该函数就会运行

function filterMarkers(agentId){
                var element = document.getElementById(agentId);
                var cls = hasClass(element,'notActive');

                if(!cls){
                    element.classList.add("notActive");
                    element.style.opacity = 0.5;
                }
                else if(cls){
                    element.classList.remove("notActive");
                    element.style.opacity = 1;  
                }
}

我想使用按钮切换每个标记的可见性(请参阅第二个代码块)。例如，当我按下带有 id=1 的按钮时，我需要隐藏/显示 agentId 属性等于 1 的标记。

Answer 1

您需要与agentId关联的标记的索引，例如(在全局区域中定义):

 var markerIndex=[];

在循环中，您必须为每个 agentId 设置关联的标记

markerInded[agentId]=marker

要切换标记，您需要隐藏和显示标记的功能，例如

toggleMarkerOff(agentId){
  markerIndex[agentId].setMap(null); 
}
toggleMarkerOff(agentId){
  markerIndex[agentId].setMap(map); 
}

然后就可以在相关元素事件中调用prpoer函数了