-1

Google Maps API を使用して 2 つのマップがあり、シーンを設定するために、それらは両方ともFuelUX Wizardの別々のペインに含まれています。

最初のペインのマップは完全に機能しますが、別のペインの 2 番目のマップでは次のように表示されます。

ここに画像の説明を入力

これは明らかに間違っています。ただし、ウィンドウのサイズを変更すると、適切な表示にポップアップします。

マップを初期化するメインの Javascript を次に示します。

    function initialize() {
              var markers = [];
              var map = new google.maps.Map(document.getElementById('map-canvas'), { 
                zoom: 5, center:  new google.maps.LatLng(30.2500, -97.7500),
                mapTypeId: google.maps.MapTypeId.HYBRID
                });
                var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), { 
                zoom: 5, center:  new google.maps.LatLng(30.2500, -97.7500),
                mapTypeId: google.maps.MapTypeId.HYBRID
                });


      // Create the search box and link it to the UI element.
      var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
      var input2 = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input-2'));


      var searchBox = new google.maps.places.SearchBox(
        /** @type {HTMLInputElement} */(input));
      var searchBox2 = new google.maps.places.SearchBox(
        /** @type {HTMLInputElement} */(input2));

      // Listen for the event fired when the user selects an item from the
      // pick list. Retrieve the matching places for that item.
      google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
       anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
          var marker = new google.maps.Marker({
            map: map,
            icon: image,
            title: place.name,
            position: place.geometry.location
          });

          markers.push(marker);

          bounds.extend(place.geometry.location);
        }

        map.fitBounds(bounds);
      });


      //Map 2

      google.maps.event.addListener(searchBox2, 'places_changed', function() {
    var places = searchBox2.getPlaces();

    if (places.length == 0) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
       anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
          var marker = new google.maps.Marker({
            map2: map2,
            icon: image,
            title: place.name,
            position: place.geometry.location
          });

          markers.push(marker);

          bounds.extend(place.geometry.location);
        }

        map2.fitBounds(bounds);
      });


      // Bias the SearchBox results towards places that are within the bounds of the
      // current map's viewport.
      google.maps.event.addListener(map, 'bounds_changed', function() {
        var bounds = map.getBounds();
        searchBox.setBounds(bounds);
      });
        google.maps.event.addListener(map2, 'bounds_changed', function() {
        var bounds = map2.getBounds();
        searchBox2.setBounds(bounds);
      });

    }

    google.maps.event.addDomListener(window, 'load', initialize);
4

1 に答える 1

1

タブが表示されたら、マップのサイズ変更をトリガーする必要があります。FuelUX で使用可能なイベントがありchanged.fu.wizardます。これは、ステップが変更されてユーザーに表示されると発生します。

$('#myWizard').on('changed.fu.wizard', function () {

    // Trigger a map resize
    google.maps.event.trigger(map, 'resize');
});

JSFiddle demo

編集：

タブの変更時にトリガーするには、次を使用しますshown.bs.tab。

$('a[data-toggle="tab"]').on('shown.bs.tab', function () {

    // Trigger a map resize 
    google.maps.event.trigger(map, 'resize');
});

JSFiddle demo

于 2014-10-01T11:17:47.607 に答える