Question

我有这段代码：

jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    map.setTilt(45);

    // Multiple Markers
    var markers = [ 
        <?php $i = 0; if($loop->have_posts()) : while($loop->have_posts()): $loop->the_post(); $location = get_field('adres'); ?>

        ['<?php echo $location['address']; ?>', <?php echo $location['lat']; ?>,<?php echo $location['lng']; ?>, <?php echo $i; ?>],

        <?php $i++; endwhile; endif; ?>
    ];

    // Info Window Content
    var infoWindowContent = [       
        <?php if($loop->have_posts()) : while($loop->have_posts()): $loop->the_post(); $location = get_field('adres'); ?>
        ['<div class="info_content">' +
        '<h3><?php echo $location['address']; ?></h3>' +
        '<p>Rodzaj: <?php the_field('rodzaj_wagi');?><br />' +
        'Numer: <?php the_field('numer');?><br />' +
        'Ilość: <?php the_field('ilość');?><br />' +
        'Data: <?php the_field('data');?></p>' +
        '</div>'],
        <?php endwhile; endif; ?>
    ];

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
                setVisible(false);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(6);
        google.maps.event.removeListener(boundsListener);
    });

    $('#testCheckbox').click(function(){    
        markers[0].setVisible(false);
    });

}

那应该显示来自数据库（WordPress）的标记 - 这很好。但我必须添加隐藏/显示复选框。我尝试使用 markers [0] .setVisible（false）; - 最后一行脚本进行测试..但我总是得到 undefined不是函数错误。有什么想法吗？

感谢您的回答。

Answer 1

您的markers数组不是google.maps.Markers的数组，他们没有.setVisible方法（或setMap方法）。将google.maps.Markers保存在google.maps.Markers数组中，使用该数组隐藏/显示标记。

在全球范围内：

var gmarkers = [];

创建标记时将其推送到这个新数组：

marker = new google.maps.Marker({
  position: position,
  map: map,
  title: markers[i][0]
});
gmarkers.push(marker);

然后这将有效（请注意从markers到gmarkers的更改）：

$('#testCheckbox').click(function(){    
    gmarkers[0].setVisible(false);
});

Google地图隐藏/显示标记未定义而非功能

1 个答案: