1

私は最初の Google マップ プロジェクトに取り組んでいます。複数のマーカーを表示し、カスタム マーカーも使用しました。ただし、マーカーをクリックすると情報ウィンドウが機能しません! 誰でも助けることができますか？

マーカーをクリックしても何も起こりません - 関数に入ることさえありません (コンソールログを設定しました)。

<script type="text/javascript">

var map,
    geocoder,
    bounds,
    address,
    marker = [],
    myLatlng = new google.maps.LatLng(40, -74);

function initialize() {

    var mapOptions = {
        center: myLatlng,
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: false,
        scrollwheel: false,
        navigationControl: true,
        mapTypeControl: false,
        scaleControl: true,
        draggable: true
    };


    //styles
    var styles = [{
    "elementType": "geometry.fill",
    "stylers": [
        { "visibility": "on" },
        { "hue": "#FF0000" },
        { "weight": 2 },
        { "gamma": 1 },
        { "lightness": 20 },
        { "saturation": 50 }
        ]
    }];


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

    geocoder = new google.maps.Geocoder();

    map.setOptions({styles: styles});


    var buildings = [
            '76 Ninth Ave, New York, NY ‎',
            '825 8th Ave, New York, NY ',
            '127 E 23rd St, New York, NY ‎'
];



    var contentString = '<div id="content">test</div>';

    var infowindow = new google.maps.InfoWindow({
            content: contentString      
        });

    var marker = {url:'<?php echo site_url(); ?>/wp-content/themes/theme/img/pointer2.png', scaledSize:new google.maps.Size(45, 72)};


    for (var i = 0; i < buildings.length; ++i) {
        (function(address) {
            geocoder.geocode({ 'address': address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                     marker += new google.maps.Marker ({
                            map: map,
                            position: results[0].geometry.location,
                            icon: marker

                    });
                };
            });
        })(buildings[i]);
    };

    google.maps.event.trigger(map, 'resize');

    google.maps.event.addListener(marker, 'click', function() {
        console.log("test3");
        infowindow.open(map,marker);

        map.setZoom(8);
        map.setCenter(marker.getPosition());
    });

};


google.maps.event.addDomListener(window, 'load', initialize);

4

1 に答える 1

2

まず、クリック eventListener をループ内に移動する必要があると思います。一番上にマーカー配列がありますが、 で上書きしているvar marker = {url:'<?php echo site_url(); ?>...ので、とりあえず「yourIcon」と呼びましょう。さらに、ループ内ですべてのマーカーを 1 つの文字列に追加することは意味がありません;)

ループ内では、すべてのマーカーに eventListener をアタッチする必要があります。

for (var i=0; i < buildings.length; i++) {
    // Create a new lexical scope by "copying the buildings"
    (function(address) {
        geocoder.geocode({ 'address': address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                // Create the marker
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                // Create the info window
                var infowindow = new google.maps.InfoWindow({
                    content: address
                });

                // Add the eventListener
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, this);
                    map.setZoom(12);
                    map.panTo(this.getPosition());
                });                   
            };
        });
    })(buildings[i]);
}


ここで動作するフィドルを見ることができます

PS
あなたはすでにあなたの質問で閉鎖の問題を回避しました.私はそれを見るのにうんざりしていまし
た.


編集 1:
ワードプレス ワードプレスでこれを機能させるために、多くのことを行う必要はありません。建物配列内でオブジェクトを使用することをお勧めします。これにより、より多くのデータに簡単にアクセスできます。

建物の配列は次のようになります。

var buildings = [
    { address: '76 Ninth Ave, New York, NY‎', title: "Test 1" },
    { address: '825 8th Ave, New York, NY‎', title: "Test 2" },
    { address: '127 E 23rd St, New York, NY‎', title: "Test 3" }
];

ループ:

<?php if ( have_posts() ) : ?>
    <?php $postCount = 0; ?>
    var buildings = [
    <?php while ( have_posts() ) : the_post(); ?>
        <?php $postcount++; ?>
        { address: '<?php customMetaAddressHere; ?>', title: '<?php the_title(); ?>', link: '<?php the_permalink(); ?>', }
        <?php if($postCount < sizeof($posts)) { ?>
        ,
        <?php } ?>
    <?php endwhile; ?>
    ];
<?php else : ?>
    var buildings = [];
<?php endif; ?>

Google マーカー ループを次のように変更します。

(function(building) {
    geocoder.geocode({ 'address': building.address }, function(results, status) {
        // You have access to buildings.title as well
        ...
    });
})(buildings[i]);

これはテストされていませんが、ここで私が意味することのフィドルを見ることができます。


編集 2: アクティブな情報ウィンドウ
は 1 つだけ 一度に 1 つの情報ウィンドウのみを開きたい場合は、ループの外に作成し、マーカーのクリック時にコンテンツと位置のみを変更することをお勧めします。

// Create the info window
var infowindow = new google.maps.InfoWindow();

for (var i=0; i < buildings.length; i++) {
    // Create a new lexical scope by "copying the buildings"
    (function(building) {
        geocoder.geocode({ 'address': building.address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                // Create the marker
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                // Add the eventListener
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent("<b>" + building.title + "</b><br> " + building.address);
                    infowindow.setPosition(this.getPosition());
                    infowindow.open(map, this);
                    map.setZoom(12);
                    map.panTo(this.getPosition());
                });               
            };
        });
    })(buildings[i]);
}

ここで動作するフィドルを見つけることができます。

于 2013-09-27T22:31:30.030 に答える