Question

我有什么方法可以为谷歌街道地图添加自定义叠加层吗？

以下是我想要叠加的示例： 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>

Answer 1

你需要将你的地图位置设置为亲戚，然后你绝对可以在地图上放置一个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-index设置为大于地图以确保其显示。

如何向Google街道地图添加自定义图片叠加层？

1 个答案: