将PHP集成到Java脚本中，使用Google API显示地图标记

时间：2016-04-25 作者：Ruan Petersen

我要显示一个地图标记，但不能显示多个标记。但是，数据显示在HTML日志中。我想我缺少一个循环，或者没有正确使用当前的循环。任何能澄清的人都会让我高兴的。非常感谢。代码如下：

<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);
};


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

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

<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);
};


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

。。。我用这个代码得到了相同的结果：

<?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);
};


<?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(); ?>

随附测试页面链接：http://www.golonutrition.co.za/find-a-store/

在你的帮助下，丹，我试着这样使用它，但很明显，我在某个地方错过了要点。。。

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

<?php
    $storeData = [];

    foreach ( $loop->posts as $post ) {
            $storeData[] = [
                    \'title\' => apply_filters(\'the_title\', $post->post_title),
                    \'lat\'   => types_render_field(\'lat\', array(\'output\'=>\'raw\')),
                    \'long\'  => types_render_field(\'long\', array(\'output\'=>\'raw\'))
            ];
    }

    wp_localize_script(\'jquery-core\', \'storeData\', $storeData);
?>

<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"));
        $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">
        function setMarkers(map) {
        for (var i=0; i<i; i++) {
            var marker=new google.maps.Marker({
                    position: new google.maps.LatLng({lat: storeData[i].lat, lng: storeData[i].long}),
                    map: map,
                    title: storeData[i].title
            });
    }
}
    </script>

<?php endwhile; ?>

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

</div>
根据Dan更新的代码。（尽管仍然有一个小错误：InvalidValueError：在属性lat中：不是数字）

<?php
$storeData = [];
$args = array(\'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\', array(\'output\'=>\'raw\')),
        \'long\'  => types_render_field(\'long\', array(\'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">
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById(\'map\'), {
            center: {lat: -28.5758488, lng: 25.1128267},
            zoom: 5
        });
        var j = storeData.length;
        for (var i=0; i<j; i++) {
            var marker=new google.maps.Marker({
                position: new google.maps.LatLng({lat: storeData[i].lat, lng: storeData[i].long}),
                map: map,
                title: storeData[i].title
            });
        }
    };
</script>

1 个回复
最合适的回答,由SO网友:dan9vu 整理而成

更新2：

<?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/js?key=AIzaSyB2ealUwmPEEdwZXFBAAcc7tiQLAl-Tys4&callback=initMap" async defer></script>

    <script type="text/javascript">
        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;
        function initMap() {
            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>

</div>

<?php get_footer(); ?>
更新1:

<?php
$storeData = [];
$args = array(\'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\', array(\'output\'=>\'raw\')),
        \'long\'  => types_render_field(\'long\', array(\'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">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById(\'map\'), {
                center: {lat: -28.5758488, lng: 25.1128267},
                zoom: 5
            });
            var j = storeData.length;
            for (var i=0; i<j; i++) {
                var marker=new google.maps.Marker({
                    position: new google.maps.LatLng({lat: storeData[i].lat, lng: storeData[i].long}),
                    map: map,
                    title: storeData[i].title
                });
            }
        };
    </script>

</div>
<小时>Problem: 在里面initMap() 回拨，您呼叫setMarkers(map) 只有一次。但在循环中，你有不止一个setMarkers(map) 作用那么只有最后一个setMarkers(map) 函数将由调用initMap() 仅显示最后一家店铺。

Solution: 最好的解决方案是使用wp_localize_script() 要将存储数据本地化为注册脚本，请执行以下操作：

必须在模板开头执行此操作：

$storeData = [];

foreach ($loop->posts as $post) {
    $storeData[] = [
        \'title\' => apply_filters(\'the_title\', $post->post_title),
        \'lat\'   => types_render_field(\'lat\', array(\'output\'=>\'raw\')),
        \'long\'  => types_render_field(\'long\', array(\'output\'=>\'raw\'))
    ];
}

wp_localize_script(\'jquery-core\', \'storeData\', $storeData);
现在，在里面initMap() 函数，渲染每个存储数据storeData 阵列：

for (var i=0; i<j; i++) {
    var marker=new google.maps.Marker({
        position: new google.maps.LatLng({lat: storeData[i].lat, lng: storeData[i].long}),
        map: map,
        title: storeData[i].title
    });
}

标签： php   javascript   google-maps   小码农  

相关推荐

如何使用unction.php更改登录URL？

我想更改我网站的登录URLhttp://example.com/wp-admin 到http://example.com/example.我不想使用插件来实现这一点，所以我可以从函数中实现这一点。php？