删除 json 标记标签

Question

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

的标签

标签在加载时显示良好，我有一个 geojson 文件，当 zoom_changed > 9 Listener 被触发时加载。当这种情况发生时，"main" geojson 关闭（可见：false）并且 "subpoints" 打开。问题是 "main" geojson 的标签不会关闭，反之亦然 "subpoints"。

到目前为止，以下 stackexchange 帖子没有帮助： "Google Map API - Removing Markers" and "Google forEach map.data feature - return feature LatLng". There have been dozens of other small things I've tried that have not worked that are too numerous to list. To make things easier, here is a jsfiddle that I created: 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

代码片段：

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);

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;
}

<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>

删除 json 标记标签

Remove json marker label

javascript

json

google-maps

geojson

infobox