Google地图为每个infowindow添加街景 [英] Google maps adding streetview to each infowindow

问题描述

我想为每个infowindow添加街景，但我无法弄清楚如何整合代码。我试着把代码放在评论集的地方，并且工作了一半。还有很多关于编程的知识。

为200px;高度：200像素;>< / DIV>';

var pano = null;
google.maps.event.addListener（infoWindow'domready'，function（）{
if（pano！= null）{
pano.unbind（position）;
$ p
$ b pano = new google.maps.StreetViewPanorama（document.getElementById（content），{
navigationControl：true，
navigationControlOptions： {style：google.maps.NavigationControlStyle.ANDROID}，
enableCloseButton：false，
addressControl：false，
linksControl：false
}）;
pano.bindTo（ point，marker）;
pano.setVisible（true）;
}）;

我使用这段代码：

  function load（）{
 var map = new google.maps.Map（document.getElementById（map_canvas），{
 center：new google.maps。 LatLng（41.640078，-102.669433），
 zoom：3，
 mapTypeId：'roadmap'
}）; 
 var infoWindow = new google.maps.InfoWindow; 
 
 downloadUrl（mymap.php，function（data）{
 var xml = data.responseXML; 
 var markers = xml.documentElement.getElementsByTagName（marker）; 
 for（var i = 0; i< markers.length; i ++）{
 var name = markers [i] .getAttribute（name）; 
 var address = markers [i ] .getAttribute（address）; 
 var type = markers [i] .getAttribute（type）; 
 var point = new google.maps.LatLng（
 parseFloat（markers [ i] .getAttribute（lat）），
 parseFloat（markers [i] .getAttribute（lng）））; 
 var html =< b>+ name +< / b>< br />+ point; 
 
 //评论*** streetview here **** 
 
 var marker = new google.maps.Marker （{
 map：map，
 position：point 
}）; 
 bindInfoWindow（marker，map，infoWindow，html）; 
} 
}） ;} 
 
函数bindInfoWindow（marker，map，infoWindow，html）{
 google.maps.eve nt.addListener（marker，'click'，function（）{
 
 infoWindow.setContent（html）; 
 infoWindow.open（map，marker）; 
}）; 
 
  

解决方案

使用DOM元素的工作示例而不是使用字符串内容）：

//此变量将收集html这将最终放置在side_bar var side_bar_html =; //数组来保存side_bar使用的标记的副本var gmarkers = []; //全局mapvariablevar map = null; var sv = new google。 maps.StreetViewService（）; var clickedMarker = null; var panorama = null; //用三个DIV占位符创建共享的infowindow //一个用于文本字符串，用于来自xml的html内容，一个用于StreetView panorama.var content = document.createElement（DIV）; var title = document.createElement（DIV）; content.appendChild（title）; var streetview = document.createElement（DIV）; streetview.style。 content.appendChild（streetview）; var htmlContent = document.createElement（DIV）; content.appendChild（htmlContent）; var infowindow = new google.maps。 InfoWindow（{size：new google.maps.Size（150，50），content：content}）; //一个创建标记并设置事件窗口函数函数createMarker（latlng，name，html）的函数{var contentString = html; var marker = new google.maps.Marker（{position：latlng，map：map，title：name，zIndex：Math.round（latlng.lat（）* -100000）<5}）; marker.myHtml = html; google.maps.event.addListener（marker，click，function（）{clickedMarker = marker; sv.getPanoramaByLocation（marker.getPosition（），50，processSVData）; // openInfoWindow（marker）;}）; //保存稍后需要用于side_bar的信息gmarkers.push（marker）; //添加一行到side_bar html side_bar_html + ='< a href =javascript：myclick（'+（gmarkers.length - 1）+'）>'+ name +'< \ / a> < br>';} //此函数获取点击并打开相应的信息窗口函数myclick（i）{google.maps.event.trigger（gmarkers [i]，click）;}函数processSVData（data，状态）{if（status == google.maps.StreetViewStatus.OK）{var marker = clickedMarker;的openInfoWindow（clickedMarker）; if（!! panorama&& !! panorama.setPano）{panorama.setPano（data.location.pano）; panorama.setPov（{heading：270，pitch：0，zoom：1}）; panorama.setVisible（真）; google.maps.event.addListener（marker，'click'，function（）{var markerPanoID = data.location.pano; //设置Pano使用传递的panoID panorama.setPano（markerPanoID）; panorama.setPov（{heading ：270，pitch：0，zoom：1}）; panorama.setVisible（true）;}）; }} else {openInfoWindow（clickedMarker）; title.innerHTML = clickedMarker.getTitle（）+< br>未找到此地点的街景数据; htmlContent.innerHTML = clickedMarker.myHtml; panorama.setVisible（假）; // alert（找不到此地点的街景数据。）; }}函数initialize（）{//创建地图//无需指定缩放和居中，因为我们将地图向下调整。 map = new google.maps.Map（document.getElementById（map_canvas），{mapTypeId：google.maps.MapTypeId.ROADMAP，streetViewControl：false}）; google.maps.event.addListener（map，'click'，function（）{infowindow.close（）;}）; //从example.xml读取数据// downloadUrl（example.xml，function（doc）{var xmlDoc = xmlParse（xmlData）; var markers = xmlDoc.documentElement.getElementsByTagName（marker）; var bounds = new google.maps.LatLngBounds（）; for（var i = 0; i< markers.length; i ++）{//获得每个标记的属性var lat = parseFloat（markers [i] .getAttribute（lat）） ; var lng = parseFloat（markers [i] .getAttribute（lng））; var point = new google.maps.LatLng（lat，lng）; var html = markers [i] .getAttribute（html）; var label = markers [i] .getAttribute（label）; //创建标记var marker = createMarker（point，label，html）; bounds.extend（point）;} //将组合的side_bar_html内容放入side_bar div document.getElementById（side_bar）。innerHTML = side_bar_html; //缩放和居中地图以适应标记map.fitBounds（bounds）; //}）;} //处理DOM ready事件以创建StreetView全景图/ /因为它只能在DIV隐藏时创建e，infowindow加载在DOM.var中pin = new google.maps.MVCObject（）; google.maps.event.addListenerOnce（infowindow，domready，function（）{panorama = new google.maps.StreetViewPanorama（streetview， {navigationControl：false，enableCloseButton：false，addressControl：false，linksControl：false，visible：true}）; panorama.bindTo（position，pin）;}）; //设置infowindow内容并将其显示在点击标记上//使用'pin'MVCObject作为domready和标记点击事件的顺序不是保证。 openInfoWindow（marker）{title.innerHTML = marker.getTitle（）; htmlContent.innerHTML = marker.myHtml; pin.set（position，marker.getPosition（））; infowindow.open（map，marker）; } //这个Javascript是基于//社区教会Javascript团队提供的代码// http://www.bisphamchurch.org.uk/ // http://econym.org.uk/gmap/ //从v2教程页面：// http://econym.org.uk/gmap/basic3.htmgoogle.maps.event.addDomListener(window，'load'，initialize）; var xmlData ='< markers> < marker lat =43.65654lng = - 79.90138html =在& lt& gt;第一个信息窗口中显示的一些内容label =Marker One/> < marker lat =43.91892lng = - 78.89231html =显示在& lt; br& gt;第二个信息窗口中的一些内容label =Marker Two/> < marker lat =43.82589lng = - 79.10040html =在< br& gt;第三个信息窗口中显示的一些内容label =Marker Three/>< / markers> '; / ** *解析给定的XML字符串并将解析后的文档返回到* DOM数据结构中。如果此浏览器不支持* XML解析，则此函数将返回空DOM节点。 * @param {string} str XML字符串。 * @return {Element | Document} DOM。 * / function xmlParse（str）{if（typeof ActiveXObject！='undefined'&& typeof GetObject！='undefined'）{var doc = new ActiveXObject（'Microsoft.XMLDOM'）; doc.loadXML（STR）; return doc; } if（typeof DOMParser！='undefined'）{return（new DOMParser（））。parseFromString（str，'text / xml'）; } return createElement（'div'，null）;}

html，body {height：100％;}

< script src =https://maps.google.com/maps/api/js>< / script><！ - 您可以将表格或div用于整体布局 - ><表格边框= 1 > < TR> < TD> < div id =map_canvasstyle =width：550px; height：450px>< / div> < / TD> < td valign =topstyle =width：150px; text-decoration：underline; color：＃4444ff;> < div id =side_bar>< / div> < / TD> < / table>

I would like to add streetview to each infowindow but I can't figure out how to integrate the code. I tried putting the code where the comments are set and that works half. Still have to learn a lot about programming.

html += '<div id="content" style="width:200px;height:200px;"></div>';

var pano = null;
google.maps.event.addListener(infoWindow, 'domready', function () {
  if (pano != null) {
    pano.unbind("position");
    pano.setVisible(false);
  }         
  pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
                navigationControl: true,
                navigationControlOptions: { style: google.maps.NavigationControlStyle.ANDROID },
                enableCloseButton: false,
                addressControl: false,
                linksControl: false
  });
  pano.bindTo("point", marker);
  pano.setVisible(true);
});

I'm using this code:

function load() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: new google.maps.LatLng(41.640078, -102.669433),
    zoom: 3,
    mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;

downloadUrl("mymap.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
        var html = "<b>" + name + "</b> <br/>" + point;

// comment *** streetview here ****

        var marker = new google.maps.Marker({
            map: map,
            position: point
        });
        bindInfoWindow(marker, map, infoWindow, html);
    }
});}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {

    infoWindow.setContent(html);
    infoWindow.open(map, marker);
 });
}

解决方案

Working example using DOM elements (rather than using string content):

// this variable will collect the html which will eventually be placed in the side_bar 
var side_bar_html = "";

// arrays to hold copies of the markers used by the side_bar 
var gmarkers = [];

// global "map" variable
var map = null;

var sv = new google.maps.StreetViewService();
var clickedMarker = null;
var panorama = null;

// Create the shared infowindow with three DIV placeholders
// One for a text string, oned for the html content from the xml, one for the StreetView panorama.
var content = document.createElement("DIV");
var title = document.createElement("DIV");
content.appendChild(title);
var streetview = document.createElement("DIV");
streetview.style.width = "200px";
streetview.style.height = "200px";
content.appendChild(streetview);
var htmlContent = document.createElement("DIV");
content.appendChild(htmlContent);

var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50),
  content: content
});

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: name,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });
  marker.myHtml = html;


  google.maps.event.addListener(marker, "click", function() {
    clickedMarker = marker;
    sv.getPanoramaByLocation(marker.getPosition(), 50, processSVData);
    // openInfoWindow(marker);
  });
  // save the info we need to use later for the side_bar
  gmarkers.push(marker);
  // add a line to the side_bar html
  side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    var marker = clickedMarker;
    openInfoWindow(clickedMarker);

    if (!!panorama && !!panorama.setPano) {

      panorama.setPano(data.location.pano);
      panorama.setPov({
        heading: 270,
        pitch: 0,
        zoom: 1
      });
      panorama.setVisible(true);

      google.maps.event.addListener(marker, 'click', function() {

        var markerPanoID = data.location.pano;
        // Set the Pano to use the passed panoID
        panorama.setPano(markerPanoID);
        panorama.setPov({
          heading: 270,
          pitch: 0,
          zoom: 1
        });
        panorama.setVisible(true);
      });
    }
  } else {
    openInfoWindow(clickedMarker);
    title.innerHTML = clickedMarker.getTitle() + "<br>Street View data not found for this location";
    htmlContent.innerHTML = clickedMarker.myHtml;
    panorama.setVisible(false);
    // alert("Street View data not found for this location.");
  }
}

function initialize() {

  // Create the map 
  // No need to specify zoom and center as we fit the map further down.
  map = new google.maps.Map(document.getElementById("map_canvas"), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  });


  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  // Read the data from example.xml
  // downloadUrl("example.xml", function(doc) {
  var xmlDoc = xmlParse(xmlData);
  var markers = xmlDoc.documentElement.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    // obtain the attribues of each marker
    var lat = parseFloat(markers[i].getAttribute("lat"));
    var lng = parseFloat(markers[i].getAttribute("lng"));
    var point = new google.maps.LatLng(lat, lng);
    var html = markers[i].getAttribute("html");
    var label = markers[i].getAttribute("label");
    // create the marker
    var marker = createMarker(point, label, html);
    bounds.extend(point);

  }
  // put the assembled side_bar_html contents into the side_bar div
  document.getElementById("side_bar").innerHTML = side_bar_html;
  // Zoom and center the map to fit the markers
  map.fitBounds(bounds);
  // });
}


// Handle the DOM ready event to create the StreetView panorama
// as it can only be created once the DIV inside the infowindow is loaded in the DOM.
var pin = new google.maps.MVCObject();
google.maps.event.addListenerOnce(infowindow, "domready", function() {
  panorama = new google.maps.StreetViewPanorama(streetview, {
    navigationControl: false,
    enableCloseButton: false,
    addressControl: false,
    linksControl: false,
    visible: true
  });
  panorama.bindTo("position", pin);
});

// Set the infowindow content and display it on marker click.
// Use a 'pin' MVCObject as the order of the domready and marker click events is not garanteed.
function openInfoWindow(marker) {
    title.innerHTML = marker.getTitle();
    htmlContent.innerHTML = marker.myHtml;
    pin.set("position", marker.getPosition());
    infowindow.open(map, marker);
  }
  // This Javascript is based on code provided by the
  // Community Church Javascript Team
  // http://www.bisphamchurch.org.uk/   
  // http://econym.org.uk/gmap/
  // from the v2 tutorial page at:
  // http://econym.org.uk/gmap/basic3.htm
google.maps.event.addDomListener(window, 'load', initialize);

var xmlData = '<markers> <marker lat="43.65654" lng="-79.90138" html="Some stuff to display in the&lt;br&gt;First Info Window"  label="Marker One" /> <marker lat="43.91892" lng="-78.89231" html="Some stuff to display in the&lt;br&gt;Second Info Window" label="Marker Two" /> <marker lat="43.82589" lng="-79.10040" html="Some stuff to display in the&lt;br&gt;Third Info Window"  label="Marker Three" /></markers> ';

/**
 * Parses the given XML string and returns the parsed document in a
 * DOM data structure. This function will return an empty DOM node if
 * XML parsing is not supported in this browser.
 * @param {string} str XML string.
 * @return {Element|Document} DOM.
 */
function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

html,
body {
  height: 100%;
}

<script src="https://maps.google.com/maps/api/js"></script>
<!-- you can use tables or divs for the overall layout -->
<table border="1">
  <tr>
    <td>
      <div id="map_canvas" style="width: 550px; height: 450px"></div>
    </td>
    <td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">
      <div id="side_bar"></div>
    </td>
  </tr>
</table>

这篇关于Google地图为每个infowindow添加街景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！