0

1つのページに複数のGoogleマップを追加しようとしています。しかし、私はいくつかの問題を抱えているようです。

これは、同じブロックを複数回、約50回作成するために（Handlebars.jsで）使用しているテンプレートになります。

<script type="text/x-handlebars-template">
{{#each productListing}}
    <div class="product-listing-wrapper">
        <div class="product-listing">
            <div class="left-side-content">
                <div class="thumb-wrapper" data-image-link="{{ThumbnailUrl}}">
                    <i class="thumb">
                        <img src="{{ThumbnailUrl}}" alt="Thumb">
                        <span class="zoom-image"></span>
                    </i>
                </div>
                <div class="google-maps-wrapper">
                    <div class="google-coordonates-wrapper">
                        <div class="google-coordonates">
                            <p>{{LatLon.Lat}}</p>
                            <p>{{LatLon.Lon}}</p>
                        </div>
                    </div>
                    <div class="google-maps-button">
                        <a class="google-maps" href="#">Google Maps</a>
                    </div>
                </div>
            </div>
            <div class="right-side-content">
                <div class="map-canvas-wrapper">
                    <div id="map-canvas" class="map-canvas" data-latitude="{{LatLon.Lat}}" data-longitude="{{LatLon.Lon}}"></div>
                </div>
                <div class="content-wrapper"></div>
            </div>
        </div>
    </div>
{{/each}}

そして、私はマップを#map-canvasIDに追加しようとしています。次のコードブロックを使用して、プロットを実行しています。

Cluster.prototype.initiate_map_assembling = function() {
    return $(this.map_canvas_wrapper_class).each(function(index, element) {
        var canvas = $(element).children();
        var latitude = $(canvas).attr('data-latitude');
        var longitude = $(canvas).attr('data-longitude');

        var coordinates = new google.maps.LatLng(latitude, longitude);

        var options = {
            zoom: 9,
            center: coordinates,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map($(canvas), options);

        var marker = new google.maps.Marker({
            position: coordinates,
            map: map
        });
    });     
};

このようにして、マップを追加しようとしているIDのすべての親クラスを「ループ」していますが、マップは最初のIDにのみ追加されます。他の方法ですべてのIDに追加しようとしましたが、同じ結果になりました。

それで、私が期待するようにそれを機能させるために私に何を提案しますか、各IDにマップを追加しますか？

4

2 に答える 2

1

IDHTMLでは、複数のノードに同じものを使用することはできません。（実際には可能ですが、最初のものの後に選択することはできません。）したがって、簡単な解決策があります。idキャンバスのを省略するdivか、その後に追加するだけindexです。

于 2012-06-19T20:51:36.427 に答える
1

jQueryのようなlibを使用していると仮定して、変更します

var map = new google.maps.Map($(canvas), options);

に

var map = new google.maps.Map($(canvas)[0], options);

それがうまくいくかもしれません、さもなければあなたのデモへのリンクは役に立ちます。

于 2012-06-19T21:11:25.423 に答える