2014-10-27 98 views

回答

0

您只需要1個var infowindow。這不應該在for()中聲明。注意:只能有一個id =「content」(id是唯一的)。

這裏是如何看待它:

  • 當客戶點擊一個標記,暫時你存儲標記爲VAR currentMarker;然後你打開infowindow。這會觸發infowindow.domready。

  • 當信息窗口的DOM準備好,只有這樣,你創建新的變種全景圖,你給它currentMarker的位置(窗戶&全景的座標的兩個位置)。

(通知給其他腳本人員:這需要在同一文件夾中的index.php 'marker.png') 代碼:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Complex icons</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
    var LocationData = [ 
     [53.13449, 18.04292, "1. ul. Gajowa 99, 85-700 Bydgoszcz" ], 
     [53.03783, 18.61368, "2. ul. Polna 17, 87-100 Torun"], 
     [54.37890, 18.59159, "3. ul. Partyzantów 70, 80-952 Gdansk" ], 
     [50.23122, 18.99280, "4. ul. Rolna 7, 40-555 Katowice" ], 
     [50.06358, 19.97002, "5. ul. Cystersów 21, 31-553 Krakow" ], 
     [50.01563, 21.97702, "6. ul. Matuszczaka 5, 35-083 Rzeszów" ], 
     [51.20651, 22.58249, "7. ul. Sierpinskiego 26, 20-448 Lublin" ], 
     [53.78115, 20.50410, "8. ul. Towarowa 4, 10-417 Olsztyn" ], 
     [53.40699, 14.59046, "9. ul.Gdanska 15a, 70-661 Szczecin" ], 
     [54.18990, 16.15861, "10. ul. Bohaterów W-wy 3, 75-211 Koszalin" ], 
     [52.22472, 20.93692, "11. ul. Sowinskiego 28, 01-105 Warszawa" ] 
    ]; 
    function initialize() { 
     var map = new google.maps.Map(document.getElementById('map-canvas')); 
     var contentString = '<div id="content" style="width:300px;height:300px;"></div>'; 
     var bounds = new google.maps.LatLngBounds(); 
     var currentMarker = null; 
     var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
     }); 

     google.maps.event.addListener(infowindow, 'domready', function() { 
     var pano = new google.maps.StreetViewPanorama(document.getElementById("content"), { 
      navigationControl: true, 
      navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID}, 
      enableCloseButton: false, 
      addressControl: false, 
      linksControl: true 
     }); 
     // set the position of the infoWindow (the div points to the marker) 
     infowindow.setPosition(currentMarker.getPosition()); 
     // set the position of the panoramic view to the right coordinates 
     pano.setPosition(currentMarker.getPosition()); 
     pano.setVisible(true); 
     }); 

     for (var i in LocationData) { 
     var p = LocationData[i]; 
     var latlng = new google.maps.LatLng(p[0], p[1]); 
     bounds.extend(latlng); 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      title: p[2], 
      icon: 'marker.png' 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
      currentMarker = this;   // store the marker that was clicked upon 
      infowindow.open(map, this); 
     }); 
     } 
     map.fitBounds(bounds); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>