将自定义字段值传递给Google地图

时间：2013-03-19 作者：Nikolas Petousis

我正在wordpress网站上显示google地图时使用此脚本：

<head>
    <script>
    function initialize()
    {
      var mapProp = {
        center:new google.maps.LatLng(51.508742,-0.120850),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };
      var map=new google.maps.Map(document.getElementById("googleMap",mapProp);
    }
    </script>          
</head>
我为经度和纬度设置了两个自定义字段“fl\\u long”、“fl”lat。如何修改上述代码，以便从自定义字段中获取值，而不是硬编码数字？

google.maps.event.addDomListener(window, \'load\', initialize);

2 个回复
SO网友:montrealist

这是一个使用wp_localize_script(), 正如其他人所建议的那样。它只是稍微干净了一点，因为您没有将PHP与JS混合，而且通常是一种将内容从服务器端传递到JavaScript的简洁方法。

首先，将以下代码放入插件或函数中。php（我使用了一个插件，因此我对其进行了相应的命名，但您可以随意命名）：

function register_plugin_scripts() {

    wp_register_script(\'my-coordinates-script\',
    plugins_url( \'my-plugin/js/using-coordinates-here.js\' ),
    \'jquery\',
    \'0.1\');

    global $post;
    $fl_lat = get_post_meta($post->ID, \'fl_lat\', true); //  "51.508742" or empty string
    $fl_long = get_post_meta($post->ID, \'fl_long\', true); // "-0.120850" or empty string

    if( !empty($fl_lat) && !empty($fl_long) ) {
        wp_localize_script(\'my-coordinates-script\', \'my-coordinates\', array(
                \'lat\' => $fl_lat,
                \'long\' => $fl_long
            )
    }

    wp_enqueue_script( \'my-coordinates-script\', plugins_url( \'my-plugin/js/using-coordinates-here.js\' ) );

} // end register_plugin_scripts

add_action( \'wp_enqueue_scripts\', \'register_plugin_scripts\' );
请注意wp_localize_script() 必须在调用wp_register_script() （对于将使用PHP生成的lat-long坐标的文件），以及wp_enqueue_script(). 这应该在页面源中输出如下内容：

<script type=\'text/javascript\'>
/* <![CDATA[ */
var my-coordinates = {"lat":"51.508742","long":"-0.120850"};
/* ]]> */
</script>
<script type=\'text/javascript\' src=\'http://yourserver/plugins/my-plugin/js/using-coordinates-here.js?ver=0.1\'></script>

然后在JS文件中，您可以让函数使用my-coordinates 对象：

function initialize() {
    lat = 0;
    long = 0;
    if (typeof my-coordinates !== \'undefined\' && my-coordinates.lat && my-coordinates.long) {
        lat = my-coordinates.lat;
        long = my-coordinates.long;
    }
    var mapProp = {
      center: new google.maps.LatLng(lat, long),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
如果代码中有不清楚的地方，请随时提问。

SO网友:Douglas.Sesar

尝试使用wordpress挂钩将脚本添加到头部：

add_action(\'wp_head\',\'your_google_head\');

function your_google_head(){
    $fl_lat = get_post_meta($your_post_id,\'fl_lat\',true);//$fl_lat = 51.508742;
    $fl_long = get_post_meta($your_post_id,\'fl_long\',true);//$fl_long = -0.120850;
    ?>
    <script type="text/javascript">

function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(<?php echo $fl_lat;?>,<?php echo $fl_long;?>),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);
}

    </script>
    <?php 
}

结束
标签： javascript   google   小码农  

相关推荐

如果自定义字段为空，则无法隐藏Google地图

我使用以下内容使用hotel\\u地址自定义字段显示google地图。<iframe width=\"440\" height=\"400\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"https://maps.google.com/maps?q=<?php the_field(\'hotel_address\'); ?>&amp;iwloc=&amp;out