2

私は Twitter Bootstrap を使用しており、プロデューサーの位置を動的に表示するモーダルに Google マップを実装しています。マーカーが中央にないという事実を除いて、すべてが正常に機能します。代わりに、常に左上隅に配置されます (スクロールした場合にのみ表示されます)。

私はここで多くのことを試しましたが、うまくいきません。誰かがここで私を助けてくれますか?

html:

  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">Test</h3>
    </div>
    <div id="modal-left" class="modal-body left">
    </div>
    <div class="modal-body right">
      <div id="map"></div>
    </div>
  </div>
</div>
<div class="row span12">
  <div id="allProducers"></div>
</div>

関連する CSS:

#map {
  height: 300px;
  width: 300px;
}

.hide {
  display: none;
}

js:

function largeMap(latitude, longitude){
    var Latlng = new google.maps.LatLng(latitude, longitude);

    var Options = {
        zoom: 10,
        center: Latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var Map = new google.maps.Map(document.getElementById("map"), Options);

    var Marker = new google.maps.Marker({
        position: Latlng,
        map:Map,
        title:"The Map"
    });

    Marker.setMap(Map);
}

$('.modal-btn').click(function(){

    var producerId = $(this).attr('id');

    GetProducer(producerId, function(data) {
        var titel = data.name;

        $('#myModalLabel').html(titel);

        $('#myModal').on('shown', function () {
          google.maps.event.trigger(map, 'resize');
          map.setCenter(new google.maps.LatLng(data.longitude, data.latitude));
        })
    });
});

注: jsFiddle を作成したいのですが、(Twitter Bootstrap に含まれる) モーダルを使用しているため、おそらく動作しない問題の一部です。

4

2 に答える 2

4

基本的に、オブジェクトにアクセスする必要がありMapます（そして、オブジェクトを再利用することを強くお勧めしますLatLng）。次のように行うことができます。

var Map; 
var Markerlatlng

function largeMap(latitude, longitude){
  Markerlatlng= new google.maps.LatLng(latitude, longitude);

  var Options = {
    zoom: 10,
    center: Markerlatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  Map = new google.maps.Map(document.getElementById("map"), Options);

  var Marker = new google.maps.Marker({
    position: Markerlatlng,
    map:Map,
    title:"The Map"
  });

  Marker.setMap(Map);
}



$('.modal-btn').click(function(){

  var producerId = $(this).attr('id');

  GetProducer(producerId, function(data) {
    var titel = data.name;

    $('#myModalLabel').html(titel);

    $('#myModal').on('shown', function () {
      google.maps.event.trigger(Map, 'resize');
      Map.setCenter(Markerlatlng);
    })
  });
});
于 2012-12-17T22:36:20.667 に答える
1

私はあなたがケースを混ぜたと思います：

 var Map = new google.maps.Map(document.getElementById("map"), Options);

と

 map.setCenter(new google.maps.LatLng(data.longitude, data.latitude));

代わりにこれを試してください

 map = new google.maps.Map(document.getElementById("map"), Options);

firebug/chrome コンソールに問題はありませんか?

于 2012-12-17T22:26:18.853 に答える