Question

您好我正在尝试从谷歌地图中删除kmz图层。

我有displayLayer函数，如果param为false，则将map设置为null

然后我将地图设置为当前的谷歌地图，否则我将地图设置为空。

当我将地图设置为null时，它不会消失，而是保持不变。

我试图了解这种行为，但我找不到这种行为的正确理由。

function displayLayer(isDisplayLayer) {
                var kmzLayer = new google.maps.KmlLayer('https://docs.google.com/uc?export=download&id=0B6SG3MFSYw7dSk1ma3B3akVzdFk', {
                    suppressInfoWindows: true,
                    preserveViewport: false,
                });
                if (isDisplayLayer) {
                    alert('set map to gmap');
                    kmzLayer.setMap(gmap);
                } else {
                    alert('set map to null');
                    kmzLayer.setMap(null);
                }
            }

Answer 1

每次调用KmlLayer函数时，您都要设置要创建的新displayLayer的地图。您可以将kmzLayer创建例如放在initMap：

上

var map;
var kmzLayer;

function displayLayer(isDisplayLayer) {
    if (isDisplayLayer) {
        alert('set map to gmap');
        kmzLayer.setMap(map);
    } else {
        alert('set map to null');
        kmzLayer.setMap(null);
    }
}

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: {lat: -36.90927416, lng: 174.84809875},
        streetViewControl: false,
        mapTypeControl: false,
        scaleControl: true,
        zoomControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    kmzLayer = new google.maps.KmlLayer('https://docs.google.com/uc?export=download&id=0B6SG3MFSYw7dSk1ma3B3akVzdFk', {
        suppressInfoWindows: true,
        preserveViewport: true,
    });
}

Answer 2

您每次都在创建一个新的KmlLayer，无论它是否已经存在。

如果已经存在，请不要重新创建，显示或隐藏它。

var kmzLayer;

function displayLayer(isDisplayLayer) {
  if (!kmzLayer) {
    // initialize global variable
    kmzLayer = new google.maps.KmlLayer('https://docs.google.com/uc?export=download&id=0B6SG3MFSYw7dSk1ma3B3akVzdFk', {
      suppressInfoWindows: true,
      preserveViewport: false,
    });
    google.maps.event.addListener(kmzLayer, "status_changed", function() {
      document.getElementById('status').innerHTML = "KmlStatus=" + kmzLayer.getStatus();
    });
  }
  if (isDisplayLayer) {
    console.log('set map to gmap');
    kmzLayer.setMap(gmap);
  } else {
    console.log('set map to null');
    kmzLayer.setMap(null);
  }
}

proof of concept fiddle

代码段

＆＃13;

var gmap;

function initialize() {
  gmap = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  displayLayer(true);
}
google.maps.event.addDomListener(window, "load", initialize);
var kmzLayer;

function displayLayer(isDisplayLayer) {
  if (!kmzLayer) {
    kmzLayer = new google.maps.KmlLayer('https://docs.google.com/uc?export=download&id=0B6SG3MFSYw7dSk1ma3B3akVzdFk', {
      suppressInfoWindows: true,
      preserveViewport: false,
    });
    google.maps.event.addListener(kmzLayer, "status_changed", function() {
      document.getElementById('status').innerHTML = "KmlStatus=" + kmzLayer.getStatus();
    });
  }
  if (isDisplayLayer) {
    console.log('set map to gmap');
    kmzLayer.setMap(gmap);
  } else {
    console.log('set map to null');
    kmzLayer.setMap(null);
  }
}

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="status"></div>
<input id="btn" type="button" onclick="displayLayer(false)" value="hide" />
<div id="map_canvas"></div>

＆＃13;

从谷歌地图中删除KMZ图层

2 个答案: