将infowindow添加到自定义Google Streetview [英] Adding infowindow to custom Google Streetview

问题描述

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

继承我将要添加的代码以集成infomarker

  var contentString =' < div id =content>'+ 
'< div id =siteNotice>'+ 
'< / div>'+ 
'< h1 id =firstHeadingclass =firstHeading> Uluru< / h1>'+ 
'< div id =bodyContent>'+ 
 
'< p> Uluru，< a href =https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194>'+ 
'https://en.wikipedia.org /w/index.php?title=Uluru</a> '+ 
'（上次访问时间为2009年6月22日）。< / p>'+ 
'< / div>'+ 
'< / div>'; 
 
 var infowindow = new google.maps.InfoWindow（{
 content：contentString 
}）; 
 
 $ b google.maps.event.addListener（bankMarker，'click'，function（）{
 infowindow.open（panorama，cafeMarker）; 
}）; 
  

解决方案

您的代码中存在拼写错误。 bankMarker 应该是 cafeMarker 。

概念证明小提琴

代码段：

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 =firstHeadingclass =firstHeading > Uluru< / h1>'+'< div id =bodyContent>'+'< p> Attribution：< a href =https://en.wikipedia.org/w/index。 php？title = Uluru& oldid = 297882194>'+'Uluru< / a> '+'（上次访问时间为2009年6月22日）。< / p>'+'< / div>'+'< / div>'; var infowindow = new google.maps.InfoWindow（{content：contentString}）; google.maps.event.addListener（cafeMarker，'click'，function（）{infowindow.open（panorama，cafeMarker）;}）; //设置地图============================================ ========================== 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?chs=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/zh_CN/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）;

< body，＃map-canvas，＃map_canvas {height：500px;宽度：500px; margin：0px; < script src =https：//

Please help me add an InfoWindow to this custom google street view. http://jsfiddle.net/geocodezip/7mh5ac28/2/

Heres the code i'm tring to add to integrate the infomarker

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);
});

解决方案

You have a typo in your code. bankMarker should be cafeMarker.

proof of concept fiddle

code snippet:

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 Streetview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！