时间戳

首页 > 解决方案 > 地图覆盖不显示。如何显示叠加层？

javascript - 地图覆盖不显示。如何显示叠加层？

问题描述

我试图在地图上显示一个叠加层，但它没有显示它。我从官方文档中复制了这段代码。这里有什么问题。我该如何解决这个问题？一旦分配了叠加层，此代码是否会刷新地图？此代码是否在地图上绘制叠加层？

代码：

var overlay;
function initMap() {
  USGSOverlay.prototype = new google.maps.OverlayView();
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 20,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: false,
        mapTypeControl: false,
        scaleControl: false,
        panControl: false,
        navigationControl: false,
        streetViewControl: false,
        gestureHandling: 'cooperative',
  });

  var bounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(62.281819, -150.287132),
          new google.maps.LatLng(62.400471, -150.005608)
      );

      var srcImage = 'https://developers.google.com/maps/documentation/' + 'javascript/examples/full/images/talkeetna.png';

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

function USGSOverlay(bounds, image, map) {
  this.bounds_ = bounds;
      this.image_ = image;
      this.map_ = map;

      this.div_ = null;

      this.setMap(map);
}

USGSOverlay.prototype.onAdd = function() {
  var div = document.createElement('div');
      div.style.borderStyle = 'none';
      div.style.borderWidth = '0px';
      div.style.position = 'absolute';

      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;

      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());
      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';
}

USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
      this.div_ = null;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" data-map-zoom="9"></div>

错误：

this.setMap 不是函数

现场演示：

https://www.vsss.co.in/Right/

标签： javascripthtml

解决方案

您错过了顶部的这一部分：

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

这将为您提供来自 OverlayView 的 setMap 和其他功能

推荐阅读