Google static maps get satellite view with tilt

问题

Didn't see anything in documentation so I figured I'd ask here:

For capturing image via google static maps api, is there any way to get views that have tilt? Doesn't seem to be any documentation on how to query for this.

Thanks.

回答1:

I've done a small example that could help you. It uses html2canvas.js and jquery.js I forked also what @mfirdaus did in another answer

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Capture map</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map {
      float: left;
      height: 640px;
      width: 640px;
    }
    .myButton1 {
      -moz-box-shadow: 0px 1px 0px 0px #fff6af;
      -webkit-box-shadow: 0px 1px 0px 0px #fff6af;
      box-shadow: 0px 1px 0px 0px #fff6af;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
      background: -moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
      background: -webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
      background: -o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
      background: -ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
      background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23', GradientType=0);
      background-color: #ffec64;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      border: 1px solid #ffaa22;
      display: inline-block;
      cursor: pointer;
      color: #333333;
      font-family: Arial;
      font-size: 15px;
      font-weight: bold;
      padding: 6px 24px;
      text-decoration: none;
      text-shadow: 0px 1px 0px #ffee66;
    }
    .myButton1:hover {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
      background: -moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
      background: -webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
      background: -o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
      background: -ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
      background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64', GradientType=0);
      background-color: #ffab23;
    }
    .myButton1:active {
      position: relative;
      top: 1px;
    }
  </style>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
</head>

<body>

  <div id="map"></div>
  <a id="btnSave" class="myButton1">generate img</a>
  <a id="togCtrl" class="myButton1">toggle controls</a>
  <div id="img-out"></div>
  <script>
    var map;
    var transform;
    var toggler = true;

    function initialize() {
      var tokio = new google.maps.LatLng(35.6801453, 139.728792);

      var agbar = new google.maps.LatLng(41.4035482, 2.1894355);
      map = new google.maps.Map(document.getElementById('map'), {
        center: agbar,
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.SATELLITE
      });


    }

     //forked of https://stackoverflow.com/a/24281734/4537906
     //get transform value

    $("#btnSave").click(function() {
      console.log('btnSave');
      var transform = $(".gm-style>div:first>div").css("transform");
      var comp = transform.split(","); //split up the transform matrix
      var mapleft = parseFloat(comp[4]); //get left value
      var maptop = parseFloat(comp[5]); //get top value
      $(".gm-style>div:first>div").css({ //get the map container.
        "transform": "none",
        "left": mapleft,
        "top": maptop,
      })
      html2canvas($('#map'), {
        useCORS: true,
        onrendered: function(canvas) {
          var dataUrl = canvas.toDataURL('image/png'); //ready to use with the below commented line
          //location.href = dataUrl; //this opens the image as an url into your browser
          $(".gm-style>div:first>div").css({
            left: 0,
            top: 0,
            "transform": transform
          })
          $("#img-out").append(canvas);
        }
      });
    });
    $("#togCtrl").click(function() {

      map.setOptions({
        disableDefaultUI: toggler,
        disableDoubleClickZoom: toggler,
        draggable: !toggler,
        scrollwheel: !toggler
      });
      toggler = !toggler;

    })
  </script>

  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initialize">
  </script>
</body>

</html>

来源：https://stackoverflow.com/questions/37537749/google-static-maps-get-satellite-view-with-tilt

标签

google-maps

google-maps-api-3

static

google-static-maps

tilt