javascript - 使用 wp_query 查找点时，标记未出现在 Google map 上

Question

我正在使用WP Favorite Posts插件允许用户在网站上选择他们最喜欢的旅游。这些帖子使用 cookie 保存到插件提供的已保存模板中。我已编辑此模板以包含 map 并从自定义元字段中提取坐标。

完整模板可以在 http://pastebin.com/zDrr5fPn 找到.

我包含的用于显示 map 的代码是:

<div id="map" style="width: 100%; height: 250px; position: relative; overflow: hidden; -webkit-transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>

我用于循环的代码是:

while ( $loop->have_posts() ) : $loop->the_post();
                if ( get_post_meta($post->ID, 'custom_latlng', true) !== '' ) : ?>
                    <div style="display:block;">
                        <script type="text/javascript">
                            function initialize() {
                            //load map
                            map = new google.maps.Map(document.getElementById('map'), { 
                                  zoom: 9, 
                                  center: new google.maps.LatLng(53.3498, -6.2603), 
                                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                                  disableDefaultUI: true
                            });


                            var savedMarkers = new Array();



                             <?php $saved_pos = get_post_meta($post->ID, 'custom_latlng', true);?>

                                function addMarker() {
                                    var savedMarker = new google.maps.Marker({
                                        map: map,
                                        position: new google.maps.LatLng(<?php echo $saved_pos ?>),
                                        icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png',
                                    });
                                savedMarkers.push(savedMarker);

                                }
                                }
                        </script>
                    </div>

目前，当我查看源代码时，我可以看到正在选择的点，坐标确实出现了。然而它们并没有出现在 map 本身上。就好像这些点出现在已保存帖子列表中，但根本不在 map 上。

我希望这是有道理的。

干杯

Answer 1

在循环内部仅用纬度/经度填充数组，在循环外部创建初始化:

<div id="map" style="width: 100%; height: 250px;"></div>

<script type="text/javascript">
  function initialize() {
    //load map
    map = new google.maps.Map(document.getElementById('map'), { 
                               zoom: 9, 
                               center: new google.maps.LatLng(53.3498, -6.2603), 
                               mapTypeId: google.maps.MapTypeId.ROADMAP,
                               disableDefaultUI: true
         });
    //create the markers
    for(var i=0;i<savedMarkers.length;++i){
      savedMarkers[i] = new google.maps.Marker({
             map: map,
             position: new google.maps.LatLng(savedMarkers[i][0],
                                              savedMarkers[i][1]),
             icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png',
           });
    }
  }

<?php
  //create a php-array to store the latitudes and longitudes
  $savedMarkers=array();
    //use the loop to populate the array
    while ( $loop->have_posts() ) : $loop->the_post();
      if ( get_post_meta($post->ID, 'custom_latlng', true) !== '' ) : 
        $savedMarkers[]=explode(',',get_post_meta($post->ID, 'custom_latlng', true));
      endif;
    endwhile;
?>
//print the array as js-variable
savedMarkers= <?php echo json_encode($savedMarkers);?>;

</script>

尚未经过测试，可能存在一些错误，但足以演示工作流程。

<小时/>

相关评论: 要将帖子标题应用为 infowindow-content ，还要将标题存储在 savingMarkers-items 中:

$savedMarkers[]=array_merge(explode(',',get_post_meta($post->ID, 'custom_latlng', true)),
                            array(get_the_title()));

当您创建标记时，为存储 infowindow-content 的标记创建一个自定义属性(我们将该属性称为 content):

//create the markers
for(var i=0;i<savedMarkers.length;++i){
  savedMarkers[i] = new google.maps.Marker({
         map: map,
         position: new google.maps.LatLng(savedMarkers[i][0],
                                          savedMarkers[i][1]),
         icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png',
          //the content(post-title)
         content: savedMarkers[i][2]
       });
}

现在使用此内容作为 infowindow-content:

google.maps.event.addListener(savedMarkers[i], 'click', function() {
    infowindow.setContent(this.get('content'));
    infowindow.open(this.getMap(), this);
  }
);

<小时/>

您还可以创建指向信息窗口内的帖子的链接:

$savedMarkers[]=array_merge(explode(',',get_post_meta($post->ID, 'custom_latlng', true)),
                            array(get_the_title(),get_permalink()));

……

//create the markers
for(var i=0;i<savedMarkers.length;++i){
  savedMarkers[i] = new google.maps.Marker({
         map: map,
         position: new google.maps.LatLng(savedMarkers[i][0],
                                          savedMarkers[i][1]),
         icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png',
         //the content(post-title)
         title: '' + savedMarkers[i][2],
         //post-URL
         href: savedMarkers[i][3]
       });
}

......

google.maps.event.addListener(savedMarkers[i], 'click', function() {
    var link=document.createElement('a');
    link.appendChild(document.createTextNode(this.get('title')));
    link.setAttribute('href',this.get('href'));
    infowindow.setContent(link);
    infowindow.open(this.getMap(), this);
  }
);