街景使用谷歌API

时间:2014-07-10 06:26:29

标签: google-maps google-maps-api-3

您好我使用Google API v 3.0来显示街景视图,但街景视图并未显示特定点,但maps.google.com正在显示此位置的街景视图。我哪里错了。

我的代码如下: -

  <!DOCTYPE html>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <html>
  <head>
   <meta charset="utf-8">
   <title>Street View service</title>
   <style>
     html, body, #map-canvas {
     height: 100%;
     margin: 0px;
     padding: 0px
   }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <script>

 var latitude=null;
 var longitude=null;
  var fenway;
  var map;
  var panoramaOptions;
  function initialize() {

  var value = '950 COUNTRY CLUB DRIVE, MORAGA 94556 ';
  alert("value"+value);
  var infoWindow = new google.maps.InfoWindow;
  $.ajax({
  url:"http://maps.googleapis.com/maps/api/geocode/json?address="+value+"&sensor=false",
  type: "POST",
  success:function(res){
  latitude=res.results[0].geometry.location.lat;
  alert("latitude"+latitude);
  longitude=res.results[0].geometry.location.lng;
  alert("longitude"+longitude);
  }
 });
 fenway = new google.maps.LatLng(latitude,longitude);
 var mapOptions = {
 center: fenway,
  zoom: 14
  };
  var map = new google.maps.Map(
  document.getElementById('map-canvas'), mapOptions);
  var panoramaOptions = {
  position: fenway,
   pov: {
   heading: 34,
   pitch: 10
   }
   };
   var panorama = new           google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
   map.setStreetView(panorama);
   }
google.maps.event.addDomListener(window, 'load', initialize);
</script>
 </head>
  <body>
   <div id="map-canvas" style="width: 400px; height: 300px"></div>
    <div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
    </body>
    </html>

1 个答案:

答案 0 :(得分:0)

对于街景视图,您可以参考此API https://developers.google.com/maps/documentation/streetview/

在这里你可以改变FOV,音高标题。希望这有帮助