0

1 つのページに複数の Google マップを表示しようとしています。エリア内の場所ごとに動的に生成される結果ページです。各 div には、Google マップを実行したいマップ クラスがあります。現時点では、1 つの div の情報を処理することしかできません。

どうにかして Google マップに配列を渡す必要があることは理解しています。しかし、実装の用途を考えると、これを行う方法について混乱しています。

HTML

<div class="map" data-address="123 easy st city st zip" data-title="location"></div>
<div class="map" data-address="456 easy st city st zip" data-title="location 2"></div>

jQuery

$('.map').each(function() {

    var geoCode = new google.maps.Geocoder(), 
    container = this;

    geoCode.geocode({'address': $(container).data('address')}, function(results, status) {
    var start_options = 0;

    if (status == google.maps.GeocoderStatus.OK) {
         var mapOptions = {
             zoom: 14,
             center: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
             zoomControl: true,
             scaleControl: false,
             scrollwheel: false,
             disableDefaultUI: true,
             mapTypeId: google.maps.MapTypeId.ROADMAP,

         }

         if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android|Blackberry|Windows Phone|Nokia|HTC|webOS)/)) {
                 mapOptions.draggable=false;
        }

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

        var marker = new google.maps.Marker({
            position: results[0].geometry.location,
            animation: google.maps.Animation.DROP,
            map: map,
            title: $(this).data('itemTitle')
        });

        google.maps.event.addListener(marker, 'click', toggleBounce);

        function toggleBounce() {
              if (marker.getAnimation() != null) {
                marker.setAnimation(null);
              } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
              }
        }

        var center;
        function calculateCenter() {
            center = map.getCenter();
        }

        google.maps.event.addDomListener(map, 'idle', function() {
            calculateCenter();
        });

        google.maps.event.addDomListener(window, 'resize', function() {
            map.setCenter(center);
        });
    } else {
        $(this).parent().hide();
    }
});
});
4

2 に答える 2

3

使用している forEach ループ内document.getElementById("map")。

これはいくつかの理由で間違っています。1 つ目は、マップに ID がないこと、クラスがあること、2 つ目は、マップが毎回同じ要素にアタッチされることです。

あなたがしたいことは、マップをループ内の現在のマップにアタッチすることです。jQuery ループでは、これはthis変数になります。

便利なことに (thisネストされた関数内で頻繁に変更される可能性があるため)、ループの最初の行はthisという変数に格納されますcontainer。

したがって、単純に に置き換えるだけdocument.getElementById("map")で、要素containerの各インスタンスに別のマップが添付されます。.map

于 2013-11-13T16:41:57.407 に答える