2

JSON 経由でマーカー データを取得しています。ローカルコピーを開発していたとき、これをJSファイルに入れ、次を使用して呼び出しました

<script src="assets/js/locations.js"></script>

現在、サイトを CMS (ExpressionEngine) に移行しています。マーカー データは動的であるため、JSON データを保持する JS テンプレートがあります。

ファイルを次のように含める必要があります（ファイル拡張子がないことに注意してください）

<script src="http://domain.com/map/locations"></script>

これが私が持っているJSONの例です。

var locations = [

    [2, 51.39006, -0.02976, 'telecommunications', 'Test 2', '<div><img src="http://localhost/map/assets/graphics/info_window/default.jpg" alt="Test 2" width="105" height="70" style="float:right;"> <p>fdgj fdh uhfj bfd nibjdfjb ndfjn fd vfn vbjdc&nbsp; ifs n ei klmvf.cx fi fskn d</p></div>', '<a href="http://www.yahoo.com" target="_blank">Read more</a>' ],   
    [1, 51.51400, -0.12002, 'transport', 'Test map marker', '<div><img src="{image:url:thumb}" alt="Test map marker" width="{image:width:thumb}" height="{image:height:thumb}" style="float:right;"> <p>eubnglrsk nekfldb jndklvcbv jdnfhl kvbmd klbndvl kbjn dkbnm lkd nbmfljeb ygdjfjn</p></div>', '<a href="http://www.google.com" target="_blank">Read more</a>' ]  

];

これは、マップのマーカー ループです。

var markers = [];

    // Looping through the JSON data
    for (var i = 0; i < locations.length; i++) {

        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            title: locations[i][4],
            icon: iconSrc[locations[i][3]]
        });
        markers.push(marker);


        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent("<div class='cont_box' id='" + locations[i][0] + "'>" + "<h2>" +locations[i][4] + "</h2>" + "<div class='cont'>" + locations[i][5] + "</div><div style='clear:both;'></div><div class='link'>" + locations[i][6] + "</div></div>");
                infoWindow.open(map, marker);
            }
        })(marker, i));

    }// END for loop

明らかに、CMS によってレンダリングされた JSON データを参照すると発生するエラーは :: です。

ReferenceError: 場所が定義されていません

URL は有効ですが、JS ファイルを使用するときのように取り込まれていないようです。

マップの JS コード自体でファイルを呼び出す方がよいかどうかはわかりません。

この作業をどのように行うことができるかについての提案は素晴らしいでしょう

4

2 に答える 2

0

私には2つのアイデアがあります。

  1. スクリプトタグでタイプを宣言します（ページ全体がhtml5かどうかわかりますか？）：
<script type="text/javascript" src="http://domain.com/map/locations"></script>

私の他のアイデアは、コードにデータをロードすることです。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.com/map/locations', true);
xhr.onload = function() {load you markers here}
};
xhr.send();
于 2013-02-06T22:01:13.300 に答える
0

マップを作成するスクリプトをソースする前に、HTMLスクリプトで「locations.js」スクリプトをソースしていることを確認してください。FirebugまたはChromeコンソールを使用して、両方のスクリプトがブラウザによって正しくロードされていることを確認します。

これらのスクリプトをロードするhtmlスニペットを確認すると便利です。

また、あなたは書くつもりでしたか：

<script src="http://domain.com/map/locations.js"></script>

上記の代わりに：

<script src="http://domain.com/map/locations"></script>
于 2013-02-06T17:42:35.707 に答える