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>
4

1 に答える 1

0

マップの位置を相対に設定する必要があります。そうすれば、マップ上に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を設定してください。

于 2012-11-30T15:16:31.907 に答える