将 PHP 集成到 Javascript 以使用 Google API 显示地图标记答案

【问题标题】：Integrating PHP into Javascript to display map markers with Google API将 PHP 集成到 Javascript 以使用 Google API 显示地图标记
【发布时间】：2016-08-11 04:36:47
【问题描述】：

我正在显示一个地图标记，但没有显示多个标记。

但是数据显示在 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/

【问题讨论】：

您能帮忙解决这个问题吗？ @geocodezip

标签： javascript php google-maps google-maps-markers

【解决方案1】：

您在 while 循环中一次又一次地初始化整个地图对象。你想把它从循环中取出，只在循环中设置标记。

【讨论】：

酷，我已经做到了，但仍然是一个地图标记。我也切换了其他变量块的位置，但似乎它们必须留在循环中。也许这段代码的第二个循环：
你需要重新组织逻辑。您实际上是在循环中一遍又一遍地重新声明变量。如果您查看正在生成的页面源代码，您会看到 Javascript 在页面下方重复出现。
让我感到困惑的是，javascript函数显示了php循环请求生成的第一组数据，但随后就停在了那个结果上。
我确实注意到它是在 HTML 中生成的，但无法理解没有显示这些数据。

【解决方案2】：

为了避免这种问题，我认为最好通过 ajax Requette 恢复结果并直接使用 javascript 的 lat 和 long 变量

【讨论】：

我可能是错的，但我认为 Ajax 请求会使事情复杂化，因为我已经通过 PHP 请求数据并设法显示第一个结果，所以我正在寻找一种方法来修复循环.

【解决方案3】：

这就是答案。非常感谢@Dan。

<?php
$storeData = [];
$args = ['post_type' => 'store'];
$loop = new WP_Query($args);
foreach ($loop->posts as $post) {
$storeData[] = [
    'title' => apply_filters('the_title', $post->post_title),
    'lat' => types_render_field('lat', ['output' => 'raw']),
    'long' => types_render_field('long', ['output' => 'raw']),
];
}    
wp_localize_script('jquery-core', 'storeData', $storeData);?>

<?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>

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

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

<script type="text/javascript">
        function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: new google.maps.LatLng(-27.2758488, 26.1128267),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    var j = storeData.length;
        for (i = 0; i < j; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(storeData[i].lat, storeData[i].long),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(storeData[i].title);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    };
</script>

【讨论】：