缩放时更改地标名称的字体大小

Question

我正在使用 geoxml3 和 Google 地图来显示 KML 文件，其中一些地标有名称。我这样创建了解析器：

$(function() {
  var myOptions = {
    center: new google.maps.LatLng(105.4009049697155, 45.9307395294156),
    zoom: 15,
    mapTypeId: "satellite",
  };
  var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions
  );

  var geoXml;

  function initialize() {
    geoXml = new geoXML3.parser({
      map: map,
      singleInfoWindow: false,
      processStyles: false,
      createMarker: createMarker,
      afterParse: useTheData,
    });
    var kml_string =
      '<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"> <Document> <name>Test</name> <Folder id="kml_1"> <name>d_y_n04</name> <Folder id="test"><name>test</name> <Placemark id="kml_478"> <name>placemark name 1</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4016150599436,45.9305731100841,488.499999999993</coordinates> </Point> </Placemark> <Placemark id="kml_368"> <name>placemark name 2</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4009049697155,45.9307395294156,0</coordinates> </Point> </Placemark> <Placemark id="kml_305"> <name>placemark name 3</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.400948826637,45.93090719596221,0</coordinates> </Point> </Placemark> <Placemark id="kml_480"> <name>Placemark name 4</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4008685356762,45.9313055053092,244.499999999993</coordinates> </Point> </Placemark> <Placemark id="kml_289"> <name>Placemark name 5</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4112903957788,45.93645760034801,0</coordinates> </Point> </Placemark> <Placemark id="kml_478"> <name>Placemark name 7</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4016150599436,45.9305731100841,488.499999999993</coordinates> </Point> </Placemark> <Placemark id="kml_297"> <name>Placemark name 6</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.403974541921,45.9341462756221,0</coordinates> </Point> </Placemark> </Folder> </Folder> </Document> </kml>';

    geoXml.parseKmlString(kml_string);

    marker_event = google.maps.event.addListener(
      map,
      "zoom_changed",
      function() {
        display_markers();
      }
    );

    center_changed_event = map.addListener("center_changed", () => {
      display_markers();
    });

    function display_markers() {
      var mapBounds = map.getBounds();
      geoXml.docs[0].markers.forEach(function(marker) {
        var in_bounds = mapBounds.contains(marker.getPosition());
        marker.setVisible(in_bounds);
      });
      geoXml.docs[0].placemarks.forEach(function(placemark) {
        if (placemark.Point) {
          placemark.style.scale = 1;
        }
      });
    }
  }

  function createMarker(placemark, doc) {
    var markerOptions = {
      optimized: true,
      position: placemark.latlng,
      map: map,
      label: placemark.name,
      icon: {
        path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
        scale: 4,
      },
      visible: true,
    };

    var marker = new google.maps.Marker(markerOptions);
    doc.markers.push(marker);

    return marker;
  }

  function useTheData(doc) {
    for (var i = 0; i < doc[0].placemarks.length; i++) {
      var placemark = doc[0].placemarks[i];
      if (placemark.polygon) {
        placemark.polygon.normalStyle = {
          strokeColor: "#ffff00",
          strokeWeight: 1,
          strokeOpacity: 0,
          fillColor: "#ffff00",
          fillOpacity: 0,
        };
        placemark.polygon.setOptions(placemark.polygon.normalStyle);
      }
    }
  }
  initialize();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Import KML</title>
</head>

<body>
  <div id="map_canvas" style="width:1000px; height:550px; border: 2px solid #3872ac;"></div>

</body>

</html>

<script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/ProjectedOverlay.js"></script>

问题是当缩小地图时，地标的显示名称会像这样相互覆盖：

所以我尝试通过添加 zoom_changed 事件来调整这些名称的大小，然后像这样更改样式的比例，但它没有用：

google.maps.event.addListener(map, "zoom_changed", function () {
        geoXml.docs[0].placemarks.forEach(function (placemark) {
          if (placemark.Point) {
            placemark.style.scale = 0.5;
          }
        });
      }
);

请告诉我哪里做错了，或者有没有办法在缩放地图时更改地标名称的字体大小。

Answer 1

我的建议是在缩放比例小于 17（或您认为提供最佳体验的任何阈值）时隐藏标签。您可以使用下面的代码根据缩放动态更改 fontSize，如果这是您真正想要的（但最终标签将不可读）。

这样做的一个选择是当你想隐藏它时将标签的字体大小设置为“0px”，当你想显示它时将它设置为“14px”（默认大小）：

  google.maps.event.addListener(map, "zoom_changed", function() {
    if (map.getZoom() < 17) {
      geoXml.docs[0].markers.forEach(function(placemark) {
        if (placemark.getMap() != null) { // only process markers that are shown
          var label = placemark.getLabel();
          console.log(label);
          if (typeof label === 'string') {
            var labelObj = {};
            labelObj.text = label;
            labelObj.fontSize = "0px"; // hide the label
            placemark.setLabel(labelObj);
          } else {
            label.fontSize = "0px";
            placemark.setLabel(label);
          }

        }
      });
    } else {
      geoXml.docs[0].markers.forEach(function(placemark) {
        if (placemark.getMap() != null) { // only process markers that are shown
          var label = placemark.getLabel();
          console.log(label);
          if (typeof label === 'string') {
            var labelObj = {};
            labelObj.text = label;
            label.fontSize = "14px";  // show the label at the default size
            placemark.setLabel(labelObj);
          } else {
            label.fontSize = "14px";
            placemark.setLabel(label);
          }
        }
      });
    }
  });

$(function() {
  var myOptions = {
    center: new google.maps.LatLng(105.4009049697155, 45.9307395294156),
    zoom: 15,
    mapTypeId: "satellite",
  };
  var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions
  );
  google.maps.event.addListener(map, "zoom_changed", function() {
    console.log("zoom=" + map.getZoom());
    if (map.getZoom() < 17) {
      geoXml.docs[0].markers.forEach(function(placemark) {
        if (placemark.getMap() != null) {
          var label = placemark.getLabel();
          console.log(label);
          if (typeof label === 'string') {
            var labelObj = {};
            labelObj.text = label;
            labelObj.fontSize = "0px";
            placemark.setLabel(labelObj);
          } else {
            label.fontSize = "0px";
            placemark.setLabel(label);
          }

        }
      });
    } else {
      geoXml.docs[0].markers.forEach(function(placemark) {
        if (placemark.getMap() != null) {
          var label = placemark.getLabel();
          console.log(label);
          if (typeof label === 'string') {
            var labelObj = {};
            labelObj.text = label;
            label.fontSize = "14px";
            placemark.setLabel(labelObj);
          } else {
            label.fontSize = "14px";
            placemark.setLabel(label);
          }
        }
      });
    }
  });
  var geoXml;

  function initialize() {
    geoXml = new geoXML3.parser({
      map: map,
      singleInfoWindow: false,
      processStyles: false,
      createMarker: createMarker,
      afterParse: useTheData,
    });
    var kml_string =
      '<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"> <Document> <name>Test</name> <Folder id="kml_1"> <name>d_y_n04</name> <Folder id="test"><name>test</name> <Placemark id="kml_478"> <name>placemark name 1</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4016150599436,45.9305731100841,488.499999999993</coordinates> </Point> </Placemark> <Placemark id="kml_368"> <name>placemark name 2</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4009049697155,45.9307395294156,0</coordinates> </Point> </Placemark> <Placemark id="kml_305"> <name>placemark name 3</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.400948826637,45.93090719596221,0</coordinates> </Point> </Placemark> <Placemark id="kml_480"> <name>Placemark name 4</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4008685356762,45.9313055053092,244.499999999993</coordinates> </Point> </Placemark> <Placemark id="kml_289"> <name>Placemark name 5</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4112903957788,45.93645760034801,0</coordinates> </Point> </Placemark> <Placemark id="kml_478"> <name>Placemark name 7</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4016150599436,45.9305731100841,488.499999999993</coordinates> </Point> </Placemark> <Placemark id="kml_297"> <name>Placemark name 6</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.403974541921,45.9341462756221,0</coordinates> </Point> </Placemark> </Folder> </Folder> </Document> </kml>';

    geoXml.parseKmlString(kml_string);

    marker_event = google.maps.event.addListener(
      map,
      "zoom_changed",
      function() {
        display_markers();
      }
    );

    center_changed_event = map.addListener("center_changed", () => {
      display_markers();
    });

    function display_markers() {
      var mapBounds = map.getBounds();
      geoXml.docs[0].markers.forEach(function(marker) {
        var in_bounds = mapBounds.contains(marker.getPosition());
        marker.setVisible(in_bounds);
      });
      geoXml.docs[0].placemarks.forEach(function(placemark) {
        if (placemark.Point) {
          placemark.style.scale = 1;
        }
      });
    }
  }

  function createMarker(placemark, doc) {
    var markerOptions = {
      optimized: true,
      position: placemark.latlng,
      map: map,
      label: placemark.name,
      icon: {
        path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
        scale: 4,
      },
      visible: true,
    };

    var marker = new google.maps.Marker(markerOptions);
    doc.markers.push(marker);

    return marker;
  }

  function useTheData(doc) {
    for (var i = 0; i < doc[0].placemarks.length; i++) {
      var placemark = doc[0].placemarks[i];
      if (placemark.polygon) {
        placemark.polygon.normalStyle = {
          strokeColor: "#ffff00",
          strokeWeight: 1,
          strokeOpacity: 0,
          fillColor: "#ffff00",
          fillOpacity: 0,
        };
        placemark.polygon.setOptions(placemark.polygon.normalStyle);
      }
    }
  }
  initialize();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Import KML</title>
</head>

<body>
  <div id="map_canvas" style="width:1000px; height:550px; border: 2px solid #3872ac;"></div>

</body>

</html>

<script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/ProjectedOverlay.js"></script>

缩放时更改地标名称的字体大小

Change font size of placemark's name when zooming

google-maps

kml

geoxml3