我要显示一个地图标记,但不能显示多个标记。

但是,数据显示在HTML日志中。我认为我错过了一个循环或没有正确使用我的当前循环。

任何可以澄清的人都会让我高兴。

谢谢。

随附代码:

<?php get_header(); ?>

<!-- Row for main content area -->
<div class="small-12 large-12 columns" id="content" role="main">

    <h1 class="entry-title">Find a store</h1>

    <script type="text/javascript">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -28.5758488, lng: 25.1128267},
                zoom: 5
            });
            setMarkers(map);
        }
        ;
    </script>

    <div id="map"></div>

    <?php
    $args = array('post_type' => 'store', array("output" => "raw"), 'posts_per_page' => 50,);
    $loop = new WP_Query($args);
    while ($loop->have_posts()) : $loop->the_post();
        ?>

        <?php $lat = types_render_field("lat", array("output" => "raw")); ?>
        <?php $long = types_render_field("long", array("output" => "raw")); ?>

        <script type="text/javascript">
            var lat = <?php echo $lat; ?>;
            var long = <?php echo $long; ?>;
            var locations = [
                ['<?php the_title(); ?>', lat, long]
            ];

            function setMarkers(map) {
                for (var i = 0; i < locations.length; i++) {
                    var location = locations[i];
                    var marker = new google.maps.Marker({
                        position: {lat: location[1], lng: location[2]},
                        map: map,
                        title: location[0],
                    });
                }
            }
        </script>
    <?php endwhile; // End the loop ?>

    <script src="https://maps.googleapis.com/maps/api/..." async defer></script>

</div>

<?php get_footer(); ?>


这是控制台日志中的输出脚本:

<script type="text/javascript">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -28.5758488, lng: 25.1128267},
                zoom: 5
            });
            setMarkers(map);
        }
        ;
</script>

<div id="map"></div>

<script type="text/javascript">
    function setMarkers(map) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: -25.746111, lng: 28.188056}),
            map: map,
            title: 'Willow Way Spar'
        });
    }
</script>

<script type="text/javascript">
    function setMarkers(map) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: -29.919885, lng: 30.941782}),
            map: map,
            title: 'Yellowwood park Superspar'
        });
    }
</script>

<script type="text/javascript">
    function setMarkers(map) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: -26.8598225, lng: 26.6317514}),
            map: map,
            title: 'Zest for Health'
        });
    }
</script>

<script type="text/javascript">
    function setMarkers(map) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: -25.8299422, lng: 28.2819103}),
            map: map,
            title: 'Zest Wellness Centre'
        });
    }
</script>


<script src="https://maps.googleapis.com/maps/api/..." async defer></script>

</div>


...并且使用以下代码我得到相同的结果:

<?php get_header(); ?>
<!-- Row for main content area -->
<div class="small-12 large-12 columns" id="content" role="main">

    <h1 class="entry-title">Find a store</h1>

    <script type="text/javascript">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -28.5758488, lng: 25.1128267},
                zoom: 5
            });
            setMarkers(map);
        }
        ;
    </script>

    <div id="map"></div>

    <?php
    $args = array('post_type' => 'store', array("output" => "raw"), 'posts_per_page' => 50,);
    $loop = new WP_Query($args);
    while ($loop->have_posts()) : $loop->the_post();
        ?>

        <?php $lat = types_render_field("lat", array("output" => "raw")); ?>
        <?php $long = types_render_field("long", array("output" => "raw")); ?>

        <script type="text/javascript">
            var lat = <?php echo $lat; ?>;
            var long = <?php echo $long; ?>;
        </script>

        <script>
            function setMarkers(map) {
                var marker = new google.maps.Marker({
                    position: {lat: lat, lng: long},
                    map: map,
                    title: '<?php the_title(); ?>',
                });
            }
        </script>

        <?php wp_reset_postdata(); ?>
    <?php endwhile; // End the loop ?>

    <script src="https://maps.googleapis.com/maps/api/..." async defer></script>

</div>

<?php get_footer(); ?>


随附指向测试页面的链接:

http://www.golonutrition.co.za/find-a-store/

最佳答案

您正在一次又一次地在while循环中初始化整个map对象。您希望将其带出循环,而仅在循环中设置标记。

10-06 15:42
查看更多