街景和谷歌地圖

Question

我試圖解決一個問題。我有一個地圖定位停車，並希望把街景。我找到了一個位置，但是「位置」數組完全不起作用。地圖只顯示在街道視圖的最後一個陣列（PS：你必須點擊圖標來顯示街道視圖）

http://www.clicrbs.com.br/sites/swf/paulMapa/mapspaul.html

function initialize() { 
    var pinkParksStyles = [ 
     { 
      featureType: "all", 
      stylers: [ 
      { saturation: -80 } 
      ] 
     }, 
     { 
      featureType: "poi.park", 
      stylers: [ 
      { hue: "#ff0023" }, 
      { saturation: 40 } 
      ] 
     } 
     ]; 

    var pinkMapType = new google.maps.StyledMapType(pinkParksStyles, 
     {name: "Paul em Floripa"}); 
    var mapOptions = { 
     zoom: 15, 
     center: new google.maps.LatLng(-27.619279,-48.527896), 
     mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP,'pink_parks','satellite' ], 
      streetViewControl: true 
     } 
     }; 

    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    var marker = new google.maps.Marker(); 
    var infowindow = new google.maps.InfoWindow(); 
    var kmlLayer = new google.maps.KmlLayer('http://www.clicrbs.com.br/sites/swf/paulMapa/trajetoComum.kml'); 



    var locations = [ 
         ['Estacionamento 1', -27.626216,-48.526806, 1], 
         ['Estacionamento 2', -27.622654,-48.528102, 2], 
         ['Estacionamento 3', -27.618236,-48.528598, 3], 
         ['Estacionamento 4', -27.615011,-48.529491, 4], 
         ['Estacionamento 5', -27.613015,-48.532554, 5], 
         ['Estacionamento 6', -27.612033,-48.534453, 6], 
         ['Estacionamento 7', -27.611326,-48.530995, 7], 
         ['Estacionamento 8', -27.613811,-48.527514, 8], 
         ]; 
    var pano = null; 

    var marker, i; 
     for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      icon: 'images/stopcar.png', 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 

     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
      } 
     })(marker, i)) 

     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, 
      enableCloseButton: true, 
      addressControl: true, 
      linksControl: false, 
      }); 

     pano.bindTo("position", marker); 
     pano.setVisible(true); 
     }); 

     google.maps.event.addListener(infowindow, 'closeclick', function() { 
      pano.unbind("position"); 
      pano.setVisible(true); 
      pano = null; 
     }); 

    } 


kmlLayer.setMap(map); 
map.mapTypes.set('pink_parks', pinkMapType); 
map.setMapTypeId('pink_parks'); 
map.setStreetView(pano); 

} 

Answer 1

我決定

function initialize() { 
    var pinkParksStyles = [ 
          { 
          featureType: "all", 
          stylers: [ 
           { saturation: -80 } 
          ] 
          }, 
          { 
          featureType: "poi.park", 
          stylers: [ 
           { hue: "#ff0023" }, 
           { saturation: 40 } 
          ] 
          } 
         ]; 

    // Create the map 
    // No need to specify zoom and center as we fit the map further down. 
    var pinkMapType = new google.maps.StyledMapType(pinkParksStyles, 
      {name: "Paul em Floripa"}); 
     var mapOptions = { 
      zoom: 15, 
      center: new google.maps.LatLng(-27.619279,-48.527896), 
      mapTypeControlOptions: { 
       mapTypeIds: [google.maps.MapTypeId.ROADMAP,'pink_parks','satellite' ], 
       streetViewControl: true 
      } 
      }; 

     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
     var kmlLayer = new google.maps.KmlLayer('http://www.clicrbs.com.br/sites/swf/paulMapa/trajetoComum.kml'); 

    // Define the list of markers. 
    // This could be generated server-side with a script creating the array. 
    var markers = [ 
     { lat:-27.626216, lng:-48.526806, name:"Estacionamento 1"}, 
     { lat:-27.622654, lng:-48.528102, name:"Estacionamento 2"}, 
     { lat:-27.618236, lng:-48.528598, name:"Estacionamento 3"}, 
     { lat:-27.615011, lng:-48.529491, name:"Estacionamento 4"}, 
     { lat:-27.613015, lng:-48.532554, name:"Estacionamento 5"}, 
     { lat:-27.612033, lng:-48.534453, name:"Estacionamento 6"}, 
     { lat:-27.611326, lng:-48.530995, name:"Estacionamento 7"}, 
     { lat:-27.613811, lng:-48.527514, name:"Estacionamento 8"}, 
     ]; 

    // Create the markers ad infowindows. 
    for (index in markers) addMarker(markers[index]); 
    function addMarker(data) { 
     // Create the marker 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(data.lat, data.lng), 
     icon: 'images/stopcar.png', 
     map: map, 
     }); 

     // Create the infowindow with two DIV placeholders 
     // One for a text string, the other for the StreetView panorama. 
     var content = document.createElement("DIV"); 
     var title = document.createElement("DIV"); 
     title.innerHTML = data.name; 
     content.appendChild(title); 
     var streetview = document.createElement("DIV"); 
     streetview.style.width = "400px"; 
     streetview.style.height = "400px"; 
     content.appendChild(streetview); 
     var infowindow = new google.maps.InfoWindow({ 
     content: content 
     }); 

     // Open the infowindow on marker click 
     google.maps.event.addListener(marker, "click", function() { 
     infowindow.open(map, marker); 
     }); 

     // 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. 
     google.maps.event.addListenerOnce(infowindow, "domready", function() { 
     var panorama = new google.maps.StreetViewPanorama(streetview, { 
      navigationControl: true, 
      enableCloseButton: true, 
      addressControl: true, 
      linksControl: false, 
      visible: true, 
      position: marker.getPosition() 
     }); 
     }); 
    } 

    // Zoom and center the map to fit the markers 
    // This logic could be conbined with the marker creation. 
    // Just keeping it separate for code clarity. 
    var bounds = new google.maps.LatLngBounds(); 
    for (index in markers) { 
     var data = markers[index]; 
     bounds.extend(new google.maps.LatLng(data.lat, data.lng)); 
    } 
    map.fitBounds(bounds); 
    map.mapTypes.set('pink_parks', pinkMapType); 
    map.setMapTypeId('pink_parks'); 
    kmlLayer.setMap(map); 
    }