-1

http://code.google.com/p/jquery-ui-map/を使用して、ローカル開発環境（WAMP）にGoogleマップを埋め込もうとしています。

必要なすべてのスクリプトをロードしました：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><script src="http://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/10/22/main.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="/app_dev.php/js/fcc600e_part_1_jquery.ui.map.full.min_1.js"></script>
<script type="text/javascript" src="/app_dev.php/js/fcc600e_part_1_myscript_2.js"></script>
<script>
      $('#map_canvas').gmap().bind('init', function(ev, map) {
        $('#map_canvas').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds': true}).click(function() {
            $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this);
        });
    });
</script>

<div id="map_canvas"></div>もちろん、スクリプト呼び出しの前にHTMLに空を入れました。

関数が実行され、コンソールエラーはまったく発生しません。「#map_canvas」内にhtmlが表示されますが、マップはビューポートの外側の上部に向かって配置されており、完全に非表示になっています。（絶対に配置するように指示するインラインCSSのようです。）

レンダリングされたHTMLは次のとおりです：http：//pastebin.com/V2cMt4Kr

これが私が使用するコードの実際のライブリンクです： http ：//www.isawu.eu/index.html

4

3 に答える 3

3

マップコンテナにcssコードを入力していないと思います。私の例を確認してください：http：//jsfiddle.net/Ywknf/12/

最後のマップ（＃map_canvas3）を除いて、CSS内に配置されているすべてのマップ（インラインまたは非インライン）が表示されます

        <div id="map_canvas"></div>
        <div id="map_canvas1"></div>
        <div id="map_canvas2" style="width:400px; height:300px;"></div>
        <div id="map_canvas3"></div> <!--invisible -->

Καλήσυνέχειαστηνπροσπάθεια

于 2013-02-13T13:34:30.060 に答える
1

他のすべてが正しいと仮定します。Googleマップコンテナのメインコンテナ（iFrameだと思います）を検索して、外部スタイルシートから次のCSSスタイルを適用してみることができます。

#map_canvas > *{margin-top:-200px !important; display:block !important;}

注： > *この場合のシンボルは、＃map_canvasからすべての子を選択します

それはあなたのページにそれを表示させるはずです。

于 2013-02-13T13:35:46.360 に答える
0

これは、Google MapsAPIv3を含めるための有効な方法ではありません。

<script src="http://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/10/22/main.js" type="text/javascript"></script>

その行を削除する必要があります。以下のバージョンは機能するはずですが、古いものです。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

これは、APIを含めるために現在文書化されている方法です

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
于 2013-02-13T13:46:34.477 に答える