谷歌地图 - 从infowindow内的按钮查看相关的街景

时间：2015-06-21 07:33:18

标签： google-maps google-maps-api-3

我正在尝试在google map infowindow中添加街景视图按钮。我们的想法是从侧面板中的数据库（在XML文件中输出）打印公司列表，其中地图在标准地图上显示其位置的标记。单击公司名称时，应在相应的地图标记上打开信息窗口。信息窗口应提供更多信息和按钮（不是链接），以打开相应位置的街景作为叠加层。我不希望街景在infowindow打开。这是我希望获得的一个例子：http://www.easypagez.eu/maps/street.html。

我可以使用侧边栏显示基本地图，但我似乎无法获取读取XML文件的代码，因此侧边栏是空的，没有地图标记。 XML很干净，我可以用另一个代码读取它，但是使用这个代码我没有看到问题。任何帮助非常感谢！

这是javascript：

<script type="text/javascript">
//<![CDATA[
 var side_bar_html = "";
 var gmarkers = [];
 var myLatlng = new google.maps.LatLng(21.13962399,-86.8928956);
 var panorama;
 var myOptions = {
  zoom: 14,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var infoWindow = new google.maps.InfoWindow;
 var bounds = new google.maps.LatLngBounds();

    function createMarker(point,map,infoWindow,html,CompanyName) {
    var marker = new  google.maps.Marker({position:point,map:map,title:CompanyName}); 
      google.maps.event.addListener(marker, 'click', function() {
      panorama = map.getStreetView();
      panorama.setPosition(marker.getPosition());
      panorama.setPov({heading:90,zoom:1}); 
      infoWindow.setContent(html); 
      infoWindow.open(map,marker); 
      });
        bounds.extend(point);
        gmarkers.push(marker);
        side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1)  + ')">' + CompanyName + '<\/a><br>';
        return marker;
    }

  function myclick(i) {
    google.maps.event.trigger(gmarkers[i], "click");
  }

  var map = new google.maps.Map(document.getElementById("map"), myOptions);

    downloadUrl("MapXML.xml", function(doc) {
    var xmlDoc = xmlParse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
      var CompanyName = markers[i].getAttribute("CompanyName");
      var CompanyAddress = markers[i].getAttribute("CompanyAddress");
      var CompanyTelephone = markers[i].getAttribute("CompanyTelephone");
      var point = new google.maps.LatLng( 
          parseFloat(markers[i].getAttribute("lat")), 
          parseFloat(markers[i].getAttribute("lng")));
      var html = "" + CompanyName + "<br />" + CompanyAddress + "<br />" + CompanyTelephone; 
      html+= '<br /><a href="#" onclick="toggleStreetView();">Streetview</a>';
      var marker = createMarker(point, map, infoWindow, html, CompanyName); 
    }
      document.getElementById("side_bar").innerHTML = side_bar_html;
      map.fitBounds(bounds); 
  });

    function toggleStreetView() {
var toggle = panorama.getVisible();
if (toggle == false) {
  panorama.setVisible(true);
} else {
  panorama.setVisible(false);
}
} 
//]]>
</script>

这是XML文件：

<?xml version="1.0" encoding="UTF-8"?>
<markers>
<marker CompanyName="Domino's Pizza" CompanyDescription="Simplemente lo mejores pizzas del mundo - caliente directo a tu hogar" CompanyKeyWords="Pizzas, Comida, Refrescos, Papas Fritas, Restaurante" lat="21.1594704" lng="-86.8511703"    CompanyAddress="Lopez Portillo y Kabah SM 60, CP 77515" CompanyCity="Cancun"  CompanyState="Quintana Roo" CompanyTelephone="01 998 893 6767" CompanyWebSite="http://dominos.com.mx/"/>
<marker CompanyName="Domino's Pizza - Lopez Portillo" CompanyDescription="Best Pizzas Anywhere" CompanyKeyWords="Pizzas, Comida, Refrescos, Papas Fritas" lat="21.161593" lng="-86.851405" CompanyAddress="Avenida Lopez Portill con Kabah, SM 60, CP77515" CompanyCity="Cancun" CompanyState="Quintana Roo" CompanyTelephone="01 998 893 6767" CompanyWebSite="http://dominos.com.mx/"/>
<marker CompanyName="Little Caesars Pizza" CompanyDescription="¿Que es HOT-N-READY? Una pizza grande de 14 pulgadas de pepperoni, acabada de sacar del horno y lista cuando tu la quieras..." CompanyKeyWords="Pizza, Crazy Bread, Pizza Vegetariana, Caesar Wings, Italian Cheese Bread, Pepperoni Cheese Bread" lat="21.1603622" lng="-86.8526773" CompanyAddress="Avenida Kabah esquina con Culuba 77515" CompanyCity="Cancun" CompanyState="Quintana Roo" CompanyTelephone="+52 998 843 6666" CompanyWebSite="http://www.littlecaesars.com.mx/"/>
<marker CompanyName="Papa Johns - Lopez Portillo" CompanyDescription="En Papa John's muchas cosas nos llevan a la excelencia, pero ninguna es tan importante como nuestro compromiso con la calidad." CompanyKeyWords="Pizzas, Papas, Refrescos, Restaurante" lat="21.1471989" lng="-86.8815107" CompanyAddress="Region 102 Manzana 60 Lote 14" CompanyCity="Cancun" CompanyState="Quintana Roo" CompanyTelephone="146-3535" CompanyWebSite="http://www.papajohnspizza.com.mx/cancun/index.php"/>
<marker CompanyName="Pizza Hut - Lopez Portillo" CompanyDescription="Ven y disfruta de los mejores pizzas y los mejores precios o pedir pizza calientito a tu casa" CompanyKeyWords="Pizzas, Comida, Refrescos" lat="21.1510182" lng="-86.8723326" CompanyAddress="Paseo Lopez Portillo, Region 97" CompanyCity="Cancun" CompanyState="Quintana Roo" CompanyTelephone="01 998 843 6600" CompanyWebSite="http://www.pizzahut.com.mx/"/>
<marker CompanyName="Santinis Pizza" CompanyDescription="Local y sabroso pizzas de horno para llevar" CompanyKeyWords="Pizza, Pepperoni, Hamburguesas, Hot Dogs" lat="21.1612207" lng="-86.8355383" CompanyAddress="Avenida Xel-Ha (Esq. Coral), Mercado 28" CompanyCity="Cancun" CompanyState="Quintana Roo" CompanyTelephone="(998)208-7020 / 208-7021" CompanyWebSite=""/>
</markers>

1 个答案:

答案 0 :(得分：2)

Once I get the XML parsed，当我点击＆＃34; StreetView＆＃34;链接，我从StreetView收到了一个javascript错误：Uncaught InvalidValueError: setPov: in property pitch: not a number，因为您传递到pitch的对象中没有setPov。如果我解决了这个问题，我会像你引用的例子那样工作。请注意，downloadUrl不能在代码片段中工作，因此我将XML作为字符串包含在内。

工作代码段

＆＃13;
＆＃13; 
var side_bar_html = "";
var gmarkers = [];
var myLatlng = new google.maps.LatLng(21.13962399, -86.8928956);
var panorama;
var myOptions = {
  zoom: 14,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}
var infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();

function createMarker(point, map, infoWindow, html, CompanyName) {
  var marker = new google.maps.Marker({
    position: point,
    map: map,
    title: CompanyName
  });
  google.maps.event.addListener(marker, 'click', function() {
    panorama = map.getStreetView();
    panorama.setPosition(marker.getPosition());
    google.maps.event.addListenerOnce(panorama, 'status_changed', function() {
      var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), marker.getPosition());
      panorama.setPov({
        heading: heading,
        zoom: 1,
        pitch: 0
      });
    });
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  bounds.extend(point);
  gmarkers.push(marker);
  side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + CompanyName + '<\/a><br>';
  return marker;
}

function initialize() {
  var map = new google.maps.Map(document.getElementById("map"), myOptions);

  // downloadUrl("MapXML.xml", function(doc) {
  var xmlDoc = xmlParse(xmlStr);
  var markers = xmlDoc.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var CompanyName = markers[i].getAttribute("CompanyName");
    var CompanyAddress = markers[i].getAttribute("CompanyAddress");
    var CompanyTelephone = markers[i].getAttribute("CompanyTelephone");
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
    var html = "" + CompanyName + "<br />" + CompanyAddress + "<br />" + CompanyTelephone;
    html += '<br /><input type="button" onclick="toggleStreetView();" value="Streetview" />';
    var marker = createMarker(point, map, infoWindow, html, CompanyName);
  }
  document.getElementById("side_bar").innerHTML = side_bar_html;
  map.fitBounds(bounds);
  // });
}
google.maps.event.addDomListener(window, 'load', initialize);

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

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);
}
var xmlStr = '<?xml version="1.0" encoding="UTF-8"?><markers><marker CompanyName="Domino&amp;apos;s Pizza" CompanyDescription="Simplemente lo mejores pizzas del mundo - caliente directo a tu hogar" CompanyKeyWords="Pizzas, Comida, Refrescos, Papas Fritas, Restaurante" lat="21.1594704" lng="-86.8511703"    CompanyAddress="Lopez Portillo y Kabah SM 60, CP 77515" CompanyCity="Cancun"  CompanyState="Quintana Roo" CompanyTelephone="01 998 893 6767" CompanyWebSite="http://dominos.com.mx/"/><marker CompanyName="Domino&amp;apos;s Pizza - Lopez Portillo" CompanyDescription="Best Pizzas Anywhere" CompanyKeyWords="Pizzas, Comida, Refrescos, Papas Fritas" lat="21.161593" lng="-86.851405" CompanyAddress="Avenida Lopez Portill con Kabah, SM 60, CP77515" CompanyCity="Cancun" CompanyState="Quintana Roo" CompanyTelephone="01 998 893 6767" CompanyWebSite="http://dominos.com.mx/"/><marker CompanyName="Little Caesars Pizza" CompanyDescription="¿Que es HOT-N-READY? Una pizza grande de 14 pulgadas de pepperoni, acabada de sacar del horno y lista cuando tu la quieras..." CompanyKeyWords="Pizza, Crazy Bread, Pizza Vegetariana, Caesar Wings, Italian Cheese Bread, Pepperoni Cheese Bread" lat="21.1603622" lng="-86.8526773" CompanyAddress="Avenida Kabah esquina con Culuba 77515" CompanyCity="Cancun" CompanyState="Quintana Roo" CompanyTelephone="+52 998 843 6666" CompanyWebSite="http://www.littlecaesars.com.mx/"/><marker CompanyName="Papa Johns - Lopez Portillo" CompanyDescription="En Papa John&amp;apos;s muchas cosas nos llevan a la excelencia, pero ninguna es tan importante como nuestro compromiso con la calidad." CompanyKeyWords="Pizzas, Papas, Refrescos, Restaurante" lat="21.1471989" lng="-86.8815107" CompanyAddress="Region 102 Manzana 60 Lote 14" CompanyCity="Cancun" CompanyState="Quintana Roo" CompanyTelephone="146-3535" CompanyWebSite="http://www.papajohnspizza.com.mx/cancun/index.php"/><marker CompanyName="Pizza Hut - Lopez Portillo" CompanyDescription="Ven y disfruta de los mejores pizzas y los mejores precios o pedir pizza calientito a tu casa" CompanyKeyWords="Pizzas, Comida, Refrescos" lat="21.1510182" lng="-86.8723326" CompanyAddress="Paseo Lopez Portillo, Region 97" CompanyCity="Cancun" CompanyState="Quintana Roo" CompanyTelephone="01 998 843 6600" CompanyWebSite="http://www.pizzahut.com.mx/"/><marker CompanyName="Santinis Pizza" CompanyDescription="Local y sabroso pizzas de horno para llevar" CompanyKeyWords="Pizza, Pepperoni, Hamburguesas, Hot Dogs" lat="21.1612207" lng="-86.8355383" CompanyAddress="Avenida Xel-Ha (Esq. Coral), Mercado 28" CompanyCity="Cancun" CompanyState="Quintana Roo" CompanyTelephone="(998)208-7020 / 208-7021" CompanyWebSite=""/></markers>';
＆＃13; 
html,
body,
#map {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
＆＃13; 
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>
<div id="side_bar"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题