Question

我正在尝试删除使用InfoBox.js脚本创建的标记标签。标记存储为外部geojson点文件，我已在下面的代码中托管。每个标记都有一个基于json属性的标签。

标签在加载时显示正常，我有一个geojson文件，当zoom_changed＆gt;加载时9触发侦听器。当发生这种情况时，“主”geojson关闭（可见：false）并且“子点”打开。问题是“主要”geojson的标签不会关闭，反之亦然“subpoints”。

到目前为止，以下stackexchange帖子没有帮助： "Google Map API - Removing Markers"和"Google forEach map.data feature - return feature LatLng"。我尝试过的其他几件小东西都没有用到太多无法列出的东西。为了简化操作，我创建了一个jsfiddle：https://jsfiddle.net/tlavery/9jzh41jr/2/。它现在不能正常运行，但我确信这是一些专业人士的快速修复。

我也用markerwithlabels.js库试过了同样的事情。发生了同样的问题，markerwithlabel比InfoBox.js选项慢得多。

这是我的简化代码，不包括其他正常工作的原始代码：

<!DOCTYPE html>
<html>
<head>
    <title>Label points</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }

        .labels {             
             font-family: "Lucida Grande", "Arial", sans-serif;
             font-size: 10px;
             font-weight: bold;
             text-align: center;
             width: 40px;            
             white-space: nowrap;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="infobox.js" type="text/javascript"></script>  
    <script>
        var map;

        var mapOptions = {
            center: { lat: 49.5, lng: -126.5 },
            zoom: 8,
            maxZoom: 15,
            minZoom: 7,
            scaleControl: true
        };

        var labelArray = [];

        //initMap initiates all the styles and listeners
        function initMap() {           

            map = new google.maps.Map(document.getElementById('map'), mapOptions);

            var harvestPoints = new google.maps.Data();
            harvestPoints.loadGeoJson('https://api.myjson.com/bins/1d9u6');

            var harvestSubPoints = new google.maps.Data();
            harvestSubPoints.loadGeoJson('https://api.myjson.com/bins/3g2qm');

            var areaIcon = function (feature) {
                labelID = "lb" + feature.getProperty('MGNT_AREA').toString();              
                var LatLong = feature.getGeometry().get();
                var labelID = new InfoBox({
                        content: feature.getProperty('MGNT_AREA'),
                        boxStyle: {
                            textAlign: "center",
                            fontSize: "8pt",
                            width: "50px"
                        },
                        disableAutoPan: true,
                        pixelOffset: new google.maps.Size(-25, -24),
                        position: LatLong,
                        closeBoxURL: "",
                        isHidden: false,
                        enableEventPropagation: true,                        
                });               
                labelID.open(map);
                labelArray.push(labelID);//this does not work for some reason
                //there is a custom icon I use for the real page. I won't bother with it here.
                //return ({ icon: 'labels/num_icon.png' });
            };           


            var vFalse = {
                visible: false
            };            

            var styleFeatures = function (hp, hsp) {                
                harvestPoints.setStyle(hp);                
                harvestSubPoints.setStyle(hsp);
            };

            styleFeatures(areaIcon, vFalse);            

            //global InfoWindow variables to display the detailed status text for the subAreaPoints
            var infowindow = new google.maps.InfoWindow({maxWidth: 300});

            harvestSubPoints.addListener('click', function (event) {              
               infowindow.setPosition(event.latLng);
               //the label and the status details are displayed seperated by a ": "
               infowindow.setContent(event.feature.getProperty('LABEL') +": "+ event.feature.getProperty('Details'));
               infowindow.open(map);
            });          

            map.addListener('zoom_changed', function (event) {              
                currentZoom = map.getZoom();
                console.log("currentZoom = " + currentZoom)                
                if (currentZoom > 9) {                    
                    styleFeatures(vFalse, areaIcon);
                } else if (currentZoom <= 9) {                    
                    styleFeatures(areaIcon, vFalse);                  
                    infowindow.close(map);                                   
                    }
                });       

            harvestSubPoints.setMap(map);           
            harvestPoints.setMap(map);            

        };//close the initMap function
        console.log("initMap() finished");
        google.maps.event.addDomListener(window, 'load', initMap);

    </script>
</head>
<body>
    <!--the map css settings from above set the map to take up 100% of the browser window-->
    <div id="map"></div>
</body>
</html>

Answer 1

一个选项是分别管理信息框，为每组标记设置一个单独的数组，在显示图层时添加与每个图层关联的信息框，或者在隐藏时从地图中删除它们：

// in the global scope
var labelArray = [];
var labelArraySub = [];


function newLabel(feature) {
    labelID = "lb" + feature.getProperty('MGNT_AREA').toString();
    var LatLong = feature.getGeometry().get();
    var label = new InfoBox({
        content: feature.getProperty('MGNT_AREA'),
        boxStyle: {
            textAlign: "center",
            fontSize: "8pt",
            width: "50px"
        },
        disableAutoPan: true,
        pixelOffset: new google.maps.Size(-25, -24),
        position: LatLong,
        closeBoxURL: "",
        isHidden: false,
        enableEventPropagation: true
    });
    label.open(map);
    return label;
}

var areaIcon = function (feature) {
    labelArray.push(newLabel(feature)); 
    return ({
        icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
    });
};
var areaIconS = function (feature) {
    labelArraySub.push(newLabel(feature)); 
    //return ({ icon: 'labels/num_icon.png' });
};

var styleFeatures = function (hp, hsp) {
    harvestPoints.setStyle(hp);
    harvestSubPoints.setStyle(hsp);
    toggleFeatures(typeof hsp == "function");
};

function toggleFeatures(sub) {
    for (var i = 0; i < labelArray.length; i++) {
        labelArray[i].setVisible(!sub);
    }
    for (var i = 0; i < labelArraySub.length; i++) {
        labelArraySub[i].setVisible(sub);
    }
}

proof of concept fiddle

代码段

＆＃13;

var map;

var mapOptions = {
  center: {
    lat: 49.5,
    lng: -126.5
  },
  zoom: 8,
  maxZoom: 15,
  minZoom: 7,
  scaleControl: true
};

var labelArray = [];
var labelArraySub = [];

//initMap initiates all the styles and listeners
function initMap() {

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var harvestPoints = new google.maps.Data();
    harvestPoints.loadGeoJson('https://api.myjson.com/bins/1d9u6');

    var harvestSubPoints = new google.maps.Data();
    harvestSubPoints.loadGeoJson('https://api.myjson.com/bins/3g2qm');


    function newLabel(feature) {
      labelID = "lb" + feature.getProperty('MGNT_AREA').toString();
      var LatLong = feature.getGeometry().get();
      var label = new InfoBox({
        content: feature.getProperty('MGNT_AREA'),
        boxStyle: {
          textAlign: "center",
          fontSize: "8pt",
          width: "50px"
        },
        disableAutoPan: true,
        pixelOffset: new google.maps.Size(-25, -24),
        position: LatLong,
        closeBoxURL: "",
        isHidden: false,
        enableEventPropagation: true
      });
      label.open(map);
      return label;
    }
    var areaIcon = function(feature) {
      labelArray.push(newLabel(feature)); //this does not work for some reason
      //there is a custom icon I use for the real page. I won't bother with it here.
      return ({
        icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
      });
    };
    var areaIconS = function(feature) {
      labelArraySub.push(newLabel(feature)); //this does not work for some reason
      //there is a custom icon I use for the real page. I won't bother with it here.
      //return ({ icon: 'labels/num_icon.png' });
    };


    var vFalse = {
      visible: false
    };

    var styleFeatures = function(hp, hsp) {
      harvestPoints.setStyle(hp);
      harvestSubPoints.setStyle(hsp);
      toggleFeatures(typeof hsp == "function");
    };

    function toggleFeatures(sub) {
      for (var i = 0; i < labelArray.length; i++) {
        labelArray[i].setVisible(!sub);
      }
      for (var i = 0; i < labelArraySub.length; i++) {
        labelArraySub[i].setVisible(sub);
      }
    }
    styleFeatures(areaIcon, vFalse);

    //global InfoWindow variables to display the detailed status text for the subAreaPoints
    var infowindow = new google.maps.InfoWindow({
      maxWidth: 300
    });

    harvestSubPoints.addListener('click', function(event) {
      infowindow.setPosition(event.latLng);
      //the label and the status details are displayed seperated by a ": "
      infowindow.setContent(event.feature.getProperty('LABEL') + ": " + event.feature.getProperty('Details'));
      infowindow.open(map);
    });

    map.addListener('zoom_changed', function(event) {
      currentZoom = map.getZoom();
      console.log("currentZoom = " + currentZoom);
      if (currentZoom > 9) {
        styleFeatures(vFalse, areaIconS);
      } else if (currentZoom <= 9) {
        styleFeatures(areaIcon, vFalse);
        infowindow.close(map);
      }
    });

    harvestSubPoints.setMap(map);
    harvestPoints.setMap(map);
    console.log("initMap() finished");
  } //close the initMap function

google.maps.event.addDomListener(window, 'load', initMap);

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  width: 100%;
}
.labels {
  font-family: "Lucida Grande", "Arial", sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  width: 40px;
  white-space: nowrap;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<title>Label points</title>
<div id="map"></div>

＆＃13;

删除json标记标签

1 个答案: