Question

我不是程序员，但我有这个HTML文件，它指向一个打开PNG文件的JSON文件。谷歌地图在缩放时模糊PNG文件，但在绘画中，图像边缘清晰。如何阻止Google地图执行此操作？

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <title>Cellpage Coverage Tester</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 80%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="output"></div>
    <select id="mapchoose" onchange="loadlayer(this.value)">
<option value="IS2000_WYBO_WA68SH350_718_0_1_800">IS2000_WYBO_WA68SH350_718_0_1_800</option>
<option value="IS2000_WYBO_WA68SH350_718_0_2_800">IS2000_WYBO_WA68SH350_718_0_2_800</option>
<option value="IS2000_WYBO_WA68SH350_718_0_3_800">IS2000_WYBO_WA68SH350_718_0_3_800</option>
<option value="IS2000_WYBO_WA68SH350_98_0_1_1900">IS2000_WYBO_WA68SH350_98_0_1_1900</option>
<option value="IS2000_WYBO_WA68SH350_98_0_2_1900">IS2000_WYBO_WA68SH350_98_0_2_1900</option>
<option value="IS2000_WYBO_WA68SH350_98_0_3_1900">IS2000_WYBO_WA68SH350_98_0_3_1900</option>
<option value="LTE_WYBO_WA68SH350_98_100098_1_1900">LTE_WYBO_WA68SH350_98_100098_1_1900</option>
<option value="LTE_WYBO_WA68SH350_98_100098_1_800">LTE_WYBO_WA68SH350_98_100098_1_800</option>
<option value="LTE_WYBO_WA68SH350_98_100098_2_1900">LTE_WYBO_WA68SH350_98_100098_2_1900</option>
<option value="LTE_WYBO_WA68SH350_98_100098_2_800">LTE_WYBO_WA68SH350_98_100098_2_800</option>
<option value="LTE_WYBO_WA68SH350_98_100098_3_1900">LTE_WYBO_WA68SH350_98_100098_3_1900</option>
<option value="LTE_WYBO_WA68SH350_98_100098_3_800">LTE_WYBO_WA68SH350_98_100098_3_800</option>
<option value="LTE_WYBO_WA68SH350_98_110098_1_2500">LTE_WYBO_WA68SH350_98_110098_1_2500</option>
<option value="LTE_WYBO_WA68SH350_98_110098_2_2500">LTE_WYBO_WA68SH350_98_110098_2_2500</option>
<option value="LTE_WYBO_WA68SH350_98_110098_3_2500">LTE_WYBO_WA68SH350_98_110098_3_2500</option>
    </select>
    <input onclick="removeOverlay();" type=button value="Remove overlay">
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script>
      var map;
      var coverageOverlay;

      function removeOverlay() {
        coverageOverlay.setMap(null);
      }

      function loadlayer( layername ) {

      $.getJSON( "https://52.23.248.134/test/" + layername + ".json", function( data ) {

        $("#output").text(data.imagename);        

    var imageBounds = {
          north: data.boundingbox.north,
          south: data.boundingbox.south,
          east: data.boundingbox.east,
          west: data.boundingbox.west
        };


        coverageOverlay = new google.maps.GroundOverlay(
            'https://52.23.248.134/test/' + data.imagename,
            imageBounds);
        coverageOverlay.setOpacity(0.6);
        coverageOverlay.setMap(map);

    console.log(data.centerlat);
    console.log(data.centerlon);

    var ll = new google.maps.LatLng(data.centerlon, data.centerlat);
    map.setCenter( ll );

      });

      };

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: {lat: 40.45356, lng: -76.38077}
        });




      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC2HKyyHu8FmK42u41dD-orjonXfNzcF-I&callback=initMap">
    </script>

  </body>
</html>

谷歌地图在缩放时模糊了png图像

0 个答案: