添加带有图像层的 KML 层 - 未加载

Question

我正在尝试添加自定义叠加层和 Kml 层。自定义图层正在工作，但 KML 图层根本没有显示。什么会导致这个？

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();

// Initialize the map and the custom overlay.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {lat: 31.1917, lng: 27.56553},
    mapTypeId: 'satellite'
  });

  var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(31.18954, 27.56144),
      new google.maps.LatLng(31.19277, 27.56806));


  var srcImage = 'https://travcop.zohosites.com/selc02.png';


  overlay = new USGSOverlay(bounds, srcImage, map);
}

/** @constructor */
function USGSOverlay(bounds, image, map) {

  // Initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // Define a property to hold the image's div. We'll
  // actually create this div upon receipt of the onAdd()
  // method so we'll leave it null for now.
  this.div_ = null;

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}

/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
USGSOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

USGSOverlay.prototype.draw = function() {

  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's div to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};

  var kmlLayer = new google.maps.KmlLayer({
    url: 'https://travcop.zohosites.com/sel.kml',
    suppressInfoWindows: true,
    map: map
  });


  function showInContentWindow(text) {
    var sidediv = document.getElementById('content-window');
    sidediv.innerHTML = text;
  }
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};

google.maps.event.addDomListener(window, 'load', initMap);

我不确定为什么没有加载 KML 图层。会不会同时加载两个图层？

尝试创建一个房地产门户网站，其中数据以 KML 标记，地图用于尚未在 Google 地图上显示的未来项目

Answer 1

发布的代码出现 javascript 错误：Uncaught ReferenceError: map is not defined。

map 变量是 initMap 函数的本地变量，您需要在 initMap 方法中实例化 KmlLayer。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {lat: 31.1917, lng: 27.56553},
    mapTypeId: 'satellite'
  });

  var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(31.18954, 27.56144),
      new google.maps.LatLng(31.19277, 27.56806));

  var srcImage = 'https://travcop.zohosites.com/selc02.png';

  overlay = new USGSOverlay(bounds, srcImage, map);

  var kmlLayer = new google.maps.KmlLayer({
    url: 'https://travcop.zohosites.com/sel.kml',
    suppressInfoWindows: true,
    preserveViewport: true,
    map: map
  });
}

一旦我解决了这个问题，就会出现另一个错误：Uncaught ReferenceError: overlayProjection is not defined，因为没有定义 overlayProjection。从Google's example 中获取定义可以解决这个问题。

proof of concept fiddle

代码 sn-p：

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();

// Initialize the map and the custom overlay.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {
      lat: 31.1917,
      lng: 27.56553
    },
    mapTypeId: 'satellite'
  });

  var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(31.18954, 27.56144),
    new google.maps.LatLng(31.19277, 27.56806));


  var srcImage = 'https://travcop.zohosites.com/selc02.png';


  overlay = new USGSOverlay(bounds, srcImage, map);

  var kmlLayer = new google.maps.KmlLayer({
    url: 'https://travcop.zohosites.com/sel.kml',
    suppressInfoWindows: true,
    preserveViewport: true,
    map: map
  });
  google.maps.event.addListener(kmlLayer, 'status_changed', function() {
    console.log(kmlLayer.getStatus());
  })
  map.fitBounds(bounds);
}

/** @constructor */
function USGSOverlay(bounds, image, map) {

  // Initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // Define a property to hold the image's div. We'll
  // actually create this div upon receipt of the onAdd()
  // method so we'll leave it null for now.
  this.div_ = null;

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}

/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
USGSOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

USGSOverlay.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's div to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};



function showInContentWindow(text) {
  var sidediv = document.getElementById('content-window');
  sidediv.innerHTML = text;
}
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};

google.maps.event.addDomListener(window, 'load', initMap);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

<div id="map"></div>