根据 id 切换谷歌地图标记答案

【问题标题】：Toggle google maps markers based on id根据 id 切换谷歌地图标记
【发布时间】：2015-10-22 02:32:00
【问题描述】：

我有一张通过for loop 显示标记的地图。

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 的标记。

【问题讨论】：

你能把它放到网上吗？小提琴，codepen...

标签： javascript php google-maps laravel google-maps-api-3

【解决方案1】：

您需要与 agentId 关联的标记的索引，例如（在全局区域中定义）：

 var markerIndex=[];

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

markerInded[agentId]=marker

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

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

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

【讨论】：