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);
  }

街景和谷歌地图

1 个答案: