Question

我似乎无法在谷歌地图上覆盖png图像。我已经查看了googlemaps api v3链接，我尝试将代码运行并让它工作但是当我在chrome上运行html代码时，我无法获得图像或地图显示。我是java脚本和html编码的新手，但我确实有python的经验。我的代码如下，它只是谷歌地图api示例的编辑版本，但我无法让它工作。我是否因为尝试运行html而遗漏了某些内容，或者我的代码是否有问题。

<!DOCTYPE html>
<html>      
<head>       
    <meta name="viewport" content="initial-scale=1.0, user-    scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
             height: 100%;
             margin: 0px;
             padding: 0px
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>


var overlay;

testOverlay.prototype = new google.maps.OverlayView();

function initialize() {
 var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(40.743388,-74.007592)
mapTypeId: google.maps.MapTypeID.SATELLITE
  };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var swBound = new google.maps.LatLng((40.73660837340877, -74.01852328);
    var neBound = new google.maps.LatLng(40.75214181, -73.99661518216243);
    var bounds = new google.maps.LatLngBounds(swBound, neBound);

    var srcImage = 'test.png';

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

}

function testOverlay(bounds, image, map){

    this.bounds_ = bounds;
    this.image_ = image;
    this.map_ = map;
    this.div_ = null;
    this.setMap(map);
    }

testOverlay.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.opacity = '0.5';
      img.style.position = 'absolute';
      div.appendChild(img);
      this.div_ = div;
      var panes = this.getPanes();
      panes.overlayLayer.appendChild(div);
  };

testOverlay.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';
    };

testOverlay.prototype.updateBounds = function(bounds){
            this.bounds_ = bounds;
                    this.draw();
                        };

testOverlay.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
 };



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

  </script>
  </head>
  <body>
   <div id="map-canvas"></div>
  </body>
  </html>

Answer 1

您有许多语法错误。纠正它们，你的地图有效......

DEMO

此行center: new google.maps.LatLng(40.743388,-74.007592)

后缺少逗号

此行中的额外(：var swBound = new google.maps.LatLng((40.73660837340877, -74.01852328);

在此行中遗漏(：div.style.width = ne.x - sw.x) + 'px';

此行中

mapTypeID应为mapTypeId：mapTypeId: google.maps.MapTypeID.SATELLITE

Answer 2

验证图片网址是否正确。

验证它是否正确的简单测试是复制＆＃39; test.png＆＃39;将文件存入与上面显示的脚本（本例中为html文件）相同的文件夹中。

如果有效则将图像移回原始位置并从根级别引用它，如下所示：

var srcImage = '/css/images/test.png';

此致

Answer 3

工作代码：

<xsl:stylesheet version="2.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="utf-8" indent="yes"/>

<xsl:template match="/html">
    <xsl:copy>
        <xsl:for-each-group select="body/*" group-starting-with="div[h1]">
            <output>
                <xsl:copy-of select="current-group()"/>
            </output>
        </xsl:for-each-group>
    </xsl:copy>
</xsl:template>

</xsl:stylesheet>

Google地图覆盖PNG图像未显示

3 个答案: