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

Question

Is there any way I can add a custom overlay to google street map ? 有什么方法可以向Google街道地图添加自定义叠加层？

Here is an example where I would like to put an overlay: JSFiddle 这是我想放置覆盖物的示例： JSFiddle

Here is the code 这是代码

<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

You need to set your map position to relative then you can absolutely place a div over the map please see my example here 您需要将地图位置设置为相对，然后才能在地图上绝对放置div，请在此处查看我的示例

http://jsfiddle.net/YjGVG/1/ 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;}

Make sure you set a z-index greater than the map to make sure it shows. 确保将z-index设置为大于地图，以确保其显示。

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

问题描述

1 个解决方案

解决方案1
0 2012-11-30 15:16:31

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

问题描述

1 个解决方案

解决方案1 0 2012-11-30 15:16:31

解决方案1
0 2012-11-30 15:16:31