帖子标题和URL未显示在Google地图标记上

时间:2018-12-25 作者:bodyhammer

我已成功显示多个标记,但我无法显示帖子标题,也无法将同一帖子标题设置为URL 转到单个页面。

下面是函数中的代码。php

     $args = array(\'post_type\' => \'post\',array(
  \'meta_query\' => array(
    \'relation\' => \'AND\',
    array(
      \'key\'   => \'lng\',  
    ),
    array(
      \'key\'   => \'lat\',  
    )
  )
));  
    $loop = new WP_Query($args);

while ( $loop->have_posts() ) : $loop->the_post();  

$title = get_the_title();
$post_category=get_the_category();
$post_category_name=$post_category[0]->cat_name;
$permalink=get_the_permalink();

$lng = get_post_meta( get_the_ID(), \'lng\', TRUE ); 
$lat = get_post_meta( get_the_ID(), \'lat\', TRUE ); 

$lnglat=$lng.",".$lat;

$arrlatlng[]=array(
    "lnglat"=>$lnglat,
    "post_title"=>$title,
    \'post_category\'=>$post_category_name,
    \'post_url\'=>$permalink);
$longitude[]=array(\'lng\'=>$lng);
$latitude[]=array(\'lat\'=>$lat);
endwhile;    
$passedValues = array( \'retrieve_data\' => $retrieve_data, 
    \'var1\' => $arrlatlng,\'lng\'=>$longitude,\'lat\'=>$latitude
);
wp_localize_script( \'spektrum_gmap.js\', \'passed_object\', $passedValues );




    function myMap() {

        var myCenter = new google.maps.LatLng(44.794426, 20.451849);
         var mapProp = {center:myCenter, zoom:15, scrollwheel:false, draggable:true,
         mapTypeId:google.maps.MapTypeId.ROADMAP};
         var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 
         var myJsarray = passed_object.retrieve_data;

         var latitute = \'\' ;
         var longitute = \'\';



         var lng = passed_object.lng;
         var lat = passed_object.lat;
         var content=  passed_object.var1;
         var post_title=content.post_title


      for (var i=0; i<lng.length; i++) {
      var marker=new google.maps.Marker({
        position: new google.maps.LatLng( lat[i].lat ,  lng[i].lng),
        map: map,
        title: content[i].post_title,
        url:content[i].post_url,
        content:content[i].post_title,
        label: {
          text: content[i].post_title,
          color: "#000",
          fontSize: "16px",
          fontWeight: "bold", 
        }
    });
}

      google.maps.event.addListener(marker, \'click\', function() {
      window.location.href = this.url;
       });

  marker.setMap(map,content);

    }

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

我这样做就解决了这个问题。

function myMap() {

var gmarkers = [];
var markers = [];
var infowindow = new google.maps.InfoWindow({
content: \'\'
});

    var myCenter = new google.maps.LatLng(44.794426, 20.451849);
     var mapProp = {center:myCenter, zoom:15, scrollwheel:false, draggable:true,
     mapTypeId:google.maps.MapTypeId.ROADMAP};
     var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 
     var myJsarray = passed_object.retrieve_data;

     var latitute = \'\' ;
     var longitute = \'\';



     var lng = passed_object.lng;
     var lat = passed_object.lat;
     var content=  passed_object.var1;
     var post_title=content.post_title


  for (var i=0; i<lng.length; i++) {
    console.log(\'data from database \'+content[i].post_title);
  var marker=new google.maps.Marker({
    icon:icon,
    position: new google.maps.LatLng( lat[i].lat ,  lng[i].lng),
    map: map,
    title: content[i].post_title,
    url:content[i].post_url,
    content:content[i].post_title,
    category:content[i].post_category,
    label: {
      text: content[i].post_title,
      color: "#000",
      fontSize: "16px",
      fontWeight: "bold", 
    }
});

  gmarkers.push(marker);

// Marker click listener
google.maps.event.addListener(marker, \'click\', (function (marker, content) {
    return function () { 
        infowindow.setContent(marker.title);
        infowindow.open(map, marker);
        map.panTo(this.getPosition());
        map.setZoom(15);
         window.location.href = marker.url;
    }
})(marker, content));

}