Google Maps API从WordPress自定义帖子类型进行协调

时间:2016-09-29 14:04:02

标签: javascript php wordpress google-maps google-maps-api-3

在从自定义帖子类型获取纬度和经度时,我遇到了一些使Google Maps API V3工作的问题。我以前在从单独的数据库中直接提取数据时工作。但是,当更改此选项以使用WP_Query从帖子类型中提取数据时,Google Maps API不会显示地图标记,因为它似乎不接受格式(我假设)。

以下是我用来从post类型中提取数据并存储在PHP数组中的代码:

 $args = array (
  'post_type'              => array( 'card' ),
  'posts_per_page'         => '-1',
);

// The Query
$site_query = new WP_Query( $args );
$result = array();
// The Loop
if ( $site_query->have_posts() ) {

  while ( $site_query->have_posts() ) {
    $site_query->the_post();
    $sitename = get_post_meta( get_the_ID(), 'siteName', true );
    $addr1 = get_post_meta( get_the_ID(), 'addr1', true );
    $addr2 = get_post_meta( get_the_ID(), 'addr2', true );
    $op1 = get_post_meta( get_the_ID(), 'op1', true );
    $priceclass = get_post_meta( get_the_ID(), 'price_class', true );
    $longitude = get_post_meta( get_the_ID(), 'longitude', true );
    $latitude = get_post_meta( get_the_ID(), 'latitude', true );


     $result[] = array(
       'siteName' => $sitename,
       'addr1' => $addr1,
       'addr2' => $addr2,
       'op1' => $op1,
       'price_class' => $priceclass,
       'longitude' => $latitude,
       'latitude' => $latitude,
     );

  }
}

wp_reset_postdata();

然后我将其存储在JavaScript变量中:

    var locations = <?php echo json_encode($result); ?>;

控制台日志显示此数据按预期到达并存储为对象。我已经跳过了基本的Google Maps initalisation,这里的代码应该在地图上打印标记。

 for(var v = 0; v < locations.length; v++) {

                    if(locations[v].op1 == "Open 24 Hours"){

                      console.log(locations[v].latitude);
                      console.log(locations[v].longitude); 


              if (circle.contains(new google.maps.LatLng(locations[v].latitude, locations[v].longitude))) {   


                var marker =  new google.maps.Marker({
                    position: new google.maps.LatLng(locations[v].latitude, locations[v].longitude),
                    map: map,
                    icon: {
                          url: '<?php echo get_template_directory_uri();?>/img/contact_map_pin1.png',
                          size: new google.maps.Size(40, 50),
                          origin: new google.maps.Point(0, 0),
                          anchor: new google.maps.Point(20, 50)
                    }
                });
                gmarkers.push(marker);

            var infowindow = new google.maps.InfoWindow({content: info_content});

            var info_content = 
                '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="iw-title">'+ locations[v].siteName + '</h1>'+
                '<div id="bodyContent">'+ 
                '</div>'+
                '<p class="infobox-address">' + locations[v].addr1 + '<br>' + locations[v].addr2 + '<br>' + locations[v].addr3 + '<br>' + locations[v].postcode + '</p>'+
                '</div>';

                 google.maps.event.addListener(marker, 'click', getInfoCallback(map, info_content));


                     jQuery('.locations-section').append('<div class="location-single"><a href="https://www.google.com/maps/place/'+ locations[v].latitude +','+ locations[v].longitude +'" target="_blank"><i class="fa fa-download" aria-hidden="true"></i></a><h3>'+ locations[v].siteName + '</h3><p>' + locations[v].addr1 + '<br>' + locations[v].addr2 + '<br>' + locations[v].addr3 + '<br>' + locations[v].postcode + '</p></div><div class="clear"></div></div>');

              } 

               }

          }

此处的console.log显示locations[v].latitudelocations[v].longitude的正确值已达到此点,但未使用Google Maps API。

我不明白为什么这样做,并尝试将经度和经度转换为在PHP和JavaScript中键入float但似乎没有任何效果。任何人都可以解释什么是错的吗?

0 个答案:

没有答案