Google地图为每个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）

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

1403页，肝出来的..