在 google 地图信息窗口中获取 wordpress post 内容

Question

我创建了一个 google 基于地图的分支页面，其中的地点是通过自定义 post 类型和 google 地图高级自定义字段对象创建的。

唯一的问题是：如果我想在 infoWindow 中包含 post 的内容（以显示位置的详细信息等）并且内容不止一行 - 代码中断...

例如

这会很好用：

Lorem ipsum dolor sit amet, id malorum numquam per

但这会中断：

Lorem ipsum dolor sit amet,
id malorum numquam per

这是获取位置内容的代码：

        var locations = [<?php while( $wp_query->have_posts() ){
        $wp_query->the_post();
        $location = get_field('google_map'); 
        ?>
        //acf location's details array
        ['<h1><?php the_title(); ?></h1><h2><?php the_field('branch_name'); ?></h2><div id=<?php echo $post->ID; ?>><?php echo $post->post_content; ?></div>', 
        <?php echo $location['lat']; ?>, <?php echo $location['lng'];?>, <?php $NUM++ ?>],
        <?php } ?> ];

这就是我将其发送到信息窗口的方式：

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
                for (var j = 0; j < markers.length; j++) {
                markers[j].setIcon("<?php echo get_template_directory_uri(); ?>/images/mapmarker.png");
            }
            marker.setIcon("<?php echo get_template_directory_uri(); ?>/images/mapmarker-active.png");
        };
    })(marker, i));

这里是完整模板代码的代码共享 link： http://www.codeshare.io/zaj6n

Answer 1

使用 json_encode 打印包含换行符的字符串（或在 JS 中有问题的字符，例如引号）：

echo json_encode($post->post_content);

为了避免由 json_encode 创建的双引号，用所需的值填充 PHP 数组并使用 json_encode:

打印整个数组

（未测试）

<?php 
  $locations=array();
  while( $wp_query->have_posts() ){
        $wp_query->the_post();
        $location = get_field('google_map');
        $locations[]=array(the_title('<h1>','</h1>',false).
                             '<h2>'.get_field('branch_name').'</h2>'.
                             '<div id="'.$post->ID.'">'.$post->post_content.'</div>',
                           $location['lat'],
                           $location['lng'],
                           $NUM++
                           ); 
  }
  echo "\nvar locations=".json_encode($locations).";\n";

?>

在 google 地图信息窗口中获取 wordpress post 内容

get wordpress post content in google map infowindow

javascript

php

wordpress

google-maps