谷歌地圖 - 查看相關的街景從infowindow按鈕

Question

我試圖在谷歌地圖infowindow添加街景按鈕。這個想法是，公司列表從側面板中的數據庫打印（輸出爲XML文件），並在地圖上顯示其位置標記。單擊公司名稱時，應該在相應的地圖標記上打開一個信息窗口。 infowindow應該提供更多的信息和一個按鈕（不是鏈接），以打開相應位置的街景視圖作爲疊加層。我不想讓街景在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> 

Answer 1

Once I get the XML parsed，當我點擊 「街景」 鏈接，我從街景得到一個JavaScript錯誤：Uncaught InvalidValueError: setPov: in property pitch: not a number ，因爲您傳入setPov的對象中沒有pitch。如果我解決了這個問題，我可以像你引用的例子一樣工作。請注意，downloadUrl不會在代碼片段中工作，因此我將XML作爲字符串包含在內。

工作代碼片段：

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>';

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map" style="border: 2px solid #3872ac;"></div> 
 
<div id="side_bar"></div>