问如何将自定义图像覆盖添加到google streetmap？
EN

Stack Overflow用户

提问于 2012-11-30 21:31:54

回答 1查看 395关注 0票数 0

有没有办法将自定义叠加添加到google街道地图？

下面是一个我想放一个覆盖图的例子：JSFiddle

以下是代码

<html><head><style type="text/css">@media print {  .gmnoprint {    display:none  }}@media screen {  .gmnoscreen {    display:none  }}</style>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Street View Layer</title>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>

    <script>
var caffe = new google.maps.LatLng(37.869085,-122.254775);

function initialize() {

  var panoramaOptions = {
    position:caffe,
     linksControl: false,       // disables link control
     panControl: false,
     enableCloseButton: false,
    pov: { 
      heading: 270,
      pitch:0,
      zoom:1
    },
    visible:true
  };
  var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);

  google.maps.event.addListener(panorama, 'pano_changed', function() {
      //var panoCell = document.getElementById('pano_cell');
     // panoCell.firstChild.nodeValue = panorama.getPano();
  });

  google.maps.event.addListener(panorama, 'links_changed', function() {
      /*var linksTable = document.getElementById('links_table');
      while(linksTable.hasChildNodes()) {
        linksTable.removeChild(linksTable.lastChild);
      };
      var links =  panorama.getLinks();
      for (var i in links) {
        var row = document.createElement("tr");
        linksTable.appendChild(row);
        var hCell = document.createElement("td");
        var hText = "Link: " + i + "";
        hCell.innerHTML = hText;
        var vCell = document.createElement("td");
        var vText = links[i].description;
        vCell.innerHTML = vText;
        linksTable.appendChild(hCell);
        linksTable.appendChild(vCell);
      }*/
  });

  google.maps.event.addListener(panorama, 'position_changed', function() {
     // console.log(panorama.getPosition());
  });

  google.maps.event.addListener(panorama, 'pov_changed', function() {
      console.log(panorama.getPov().heading);

  });

}
    </script>
  <script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/1/%7Bcommon,map%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/1/%7Butil,onion%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/1/%7Bcontrols,stats%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/1/%7Bmarker%7D.js"></script></head>
  <body onload="initialize()">

    <div id="pano" style="width: 400px; height: 300px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0);"></div>

</body></html>

javascript

回答 1

Stack Overflow用户

发布于 2012-11-30 23:16:32

您需要将您的地图位置设置为相对位置，然后您可以在地图上放置一个div，请参阅此处的示例

http://jsfiddle.net/YjGVG/1/

#pano{position:relative;}


.overlay{position:absolute;top:0;left:0;width:100%;height:30px;background-color:#000; opacity:0.5;z-index:100;color:red;}

确保将z索引设置为大于映射，以确保其显示。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13646279

复制

相似问题

问如何将自定义图像覆盖添加到google streetmap？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将自定义图像覆盖添加到google streetmap？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将自定义图像覆盖添加到google streetmap？
EN