Question

请你看一下link，然后让我知道为什么这个谷歌地图既不在我的电脑上也不在jsfiddle上工作。我刚收到[Google Maps API的代码。我是否还需要添加更多内容？

正如我所说，我在我的电脑和jsfiddle网站上尝试了这个链接感谢您的评论和帮助 3] 2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Overlays within Street View</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var panorama;
var astorPlace = new google.maps.LatLng(40.729884, -73.990988);
var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491);
var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272);
var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891);

function initialize() {

// Set up the map
var mapOptions = {
center: astorPlace,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
 map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

 // Setup the markers on the map
 var cafeMarker = new google.maps.Marker({
  position: cafe,
  map: map,
  icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
  title: 'Cafe'
  });

 var bankMarker = new google.maps.Marker({
  position: bank,
  map: map,
  icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
  title: 'Bank'
  });

  var busMarker = new google.maps.Marker({
  position: busStop,
  map: map,
  icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
  title: 'Bus Stop'
});

 // We get the map's default panorama and set up some defaults.
 // Note that we don't yet set it visible.
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(/** @type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
}

function toggleStreetView() {
var toggle = panorama.getVisible();
 if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}

 google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
  <div id="panel" style="margin-left:-100px">
    <input type="button" value="Toggle Street View" onclick="toggleStreetView();">      </input>
</div>
<div id="map-canvas"></div>
</body>
</html>

Answer 1

您需要为height设置width和map-canvas。我已经清理了一些代码，它应该在这里工作：http://jsfiddle.net/Zuds3/3/

<强> HTML

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'> </script>
<div id="panel" style="margin-left:-100px">
    <input type="button" value="Toggle Street View" onclick = "toggleStreetView();" ></input>
</div>
<div id="map-canvas"></div>

<强> CSS

#map-canvas{
    height: 400px;
    width: 400px;
}

<强>的JavaScript

var map;
var panorama;
var astorPlace = new google.maps.LatLng(40.729884, -73.990988);
var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491);
var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272);
var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891);

function initialize() {

  // Set up the map
  var mapOptions = {
    center: astorPlace,
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Setup the markers on the map
  var cafeMarker = new google.maps.Marker({
      position: cafe,
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
      title: 'Cafe'
  });

  var bankMarker = new google.maps.Marker({
      position: bank,
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
      title: 'Bank'
  });

  var busMarker = new google.maps.Marker({
      position: busStop,
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
      title: 'Bus Stop'
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView();
  panorama.setPosition(astorPlace);
  panorama.setPov(/** @type {google.maps.StreetViewPov} */({
    heading: 265,
    pitch: 0
  }));
}

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

Google Maps Api 3示例不适用于Jsfiddle

1 个答案: