1

データベースからロードされたデータに基づいてテキストと Google マップを表示するクライアント用の Wordpress ページを作成しています。

これまでのところ、私はそれのほとんどを機能させることができました。ただし、Google マップは読み込みを開始し、不思議なことに「青く」表示され、海のように見えるものだけが表示され、他のすべてのオプション (ズームイン/ズームアウト、ストリート ビューなど) がグレー表示されます。

  • FireBug などから入手できる JavaScript エラーはありません。
  • マップ ( #container および #map-canvas ) を含む div は、実際のピクセル値に設定されます。
  • ここで与えられた解決策は、肯定的な結果をもたらしません。

最終結果は次のようになります。

それはどのようなものか

どんなアイデアでも大歓迎です。

編集： リクエストごとのコードスニップ：

echo '<script>function initialize(e,t,n){e=parseFloat(e);t=parseFloat(t);var r=new google.maps.LatLng(e,t);var i;var s;var o={center:r,zoom:14,mapTypeId:google.maps.MapTypeId.ROADMAP};s=new google.maps.Map(document.getElementById("map-canvas"),o);i=new google.maps.Marker({map:s,draggable:false,animation:google.maps.Animation.DROP,position:r,title:n});google.maps.event.addDomListener(window,"load",initialize)}jQuery(function($){initialize("'.$detail['latitude'].'","'.$detail['longitude'].'","'.$detail['name'].'")})</script>';
        echo '
            <div id="container" style="height:500px;width:500px;">
                <div id="information">
                    <h2>'.$detail['name'].'</h2>
                    <p>'.$detail['description'].'</p>
                    <p>'.$detail['address'].'</p>
                </div>
                <div id="map-canvas" style="width:300px;height:200px;">
                </div>
            </div>
        ';

JS の縮小されていないバージョン:

function initialize(lat,lng,name) {
lat = parseFloat(lat);
lng = parseFloat(lng);
var ourLocation = new google.maps.LatLng(lat,lng);
var marker;
var map;
    var mapOptions = {
        center: ourLocation,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    marker = new google.maps.Marker({
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: ourLocation,
        title:name
    });
    google.maps.event.addDomListener(window,"load",initialize);
};

jQuery(function($){
    initialize(lat,lng,name);
    // the variables lat, lng, and name are replaced with php variables in the code
});
4

1 に答える 1

0

私はそれを考え出した。少し時間がかかりましたが...

Wordpress は何らかの理由で jQuery 呼び出しを嫌います。

JS コンソールで、生成されたソースからリッピングした変数を使用して初期化関数を呼び出すと、マップが魔法のように機能することに気付きました。

jQuery を使用する代わりに、Windows の onload イベントを使用しました。

window.onload = function() { initialize('.$detail['latitude'].','.$detail['longitude'].',"'.$detail['name'].'"); }

これは魔法のように機能します。教訓として、jQuery と Wordpress はストロベリー チョコレート ミルクとインディア ペール エールのようなものです。これらはうまく混ざりません。

貢献してくれたみんなに感謝します。

于 2013-06-12T23:25:27.220 に答える