Question

请帮我添加一个InfoWindow到这个自定义谷歌街景。 http://jsfiddle.net/geocodezip/7mh5ac28/2/

下面是我要添加的代码以整合信息标记

var contentString = '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
  '<div id="bodyContent">'+

  '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
  'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
  '(last visited June 22, 2009).</p>'+
  '</div>'+
  '</div>';

 var infowindow = new google.maps.InfoWindow({
  content: contentString
 });


google.maps.event.addListener(bankMarker, 'click', function() {
  infowindow.open(panorama,cafeMarker);
});

Answer 1

您的代码中有拼写错误。 bankMarker应为cafeMarker。

proof of concept fiddle

代码段

var geocoder;
var map;

function initialize() {
  var fenway = new google.maps.LatLng(34.9355, -107.539254);

  var panoOptions = {
    position: fenway,
    addressControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    linksControl: false,
    panControl: false,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    enableCloseButton: false
  };

  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map-canvas'), panoOptions);

  var cafe = new google.maps.LatLng(34.935196, -107.539546);

  var cafeMarker = new google.maps.Marker({
    position: cafe,
    map: panorama,
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
    title: 'Cafe'
  });

  var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    '<p>Attribution: <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    'Uluru</a> ' +
    '(last visited June 22, 2009).</p>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });


  google.maps.event.addListener(cafeMarker, 'click', function() {
    infowindow.open(panorama, cafeMarker);
  });

  // Set up the map ======================================================================
  var myOptions = {
    zoom: 15,
    center: cafe
  };
  map = new google.maps.Map(document.getElementById('map_canvas'),
    myOptions);
  var cafeMarkerMap = 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 panoMarker = new google.maps.Marker({
    position: panorama.getPosition(),
    map: map,
    icon: {
      url: 'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png',
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    },
    title: 'Pano'
  });

  document.getElementById('info').innerHTML = google.maps.geometry.spherical.computeDistanceBetween(panorama.getPosition(), cafe).toFixed(2) + " meters";
  var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), cafe);

  // alert(data.location.latLng+":"+myLatLng+":"+heading);
  panorama.setPov({
    heading: heading,
    pitch: 0,
    zoom: 1
  });
  google.maps.event.addListener(map, 'click', function(evt) {
    document.getElementById('info').innerHTML = evt.latLng.toUrlValue(6);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<div id="info"></div>

将infowindow添加到自定义Google街景

1 个答案: