Question

我正在尝试使用元数据来获取邮政编码，例如：

$property->add_meta_box( 
    'Property Info', 
    array(
        array(
              'name'        => 'postcode',
              'label'       => 'Postcode',
              'type'        => 'text',
        );
     )
);

在每个帖子类型 - 属性上创建一个元框。如果属性有邮政编码，如何使用此邮政编码动态生成谷歌地图？

Answer 1

我将展示我是如何做到的，但这是一年前的事情，根据谷歌地图/地理编码的更新，可能会有更新的现代答案。地理编码是将邮政编码转换为纬度/经度的过程。这段代码全部在我的single.php中，因为我使用它来显示各个帖子上的地图，根据您的设置方式，您可以采用不同的方式。

我最初使用Yahoo Maps API对邮政编码进行地理编码，然后使用Google地图作为地图，因为Google地图的地理编码非常不准确。雅虎关闭了他们的服务，因此我将其更改为Google Local Search版本的地理编码，当时比谷歌地图更准确（这是去年，2011年）。

首先确保将脚本包含在<head>

中的地图API中

https://developers.google.com/maps/documentation/javascript/tutorial#api_key

和

<body onload="initialize()" onunload="GUnload()">

在您的模板中，您可以访问自定义选项（假设其ID为postcode）;

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

然后使用以下Javscript对地址进行地理编码并生成地图（在#map_canvas中）。

这是JS;

<script type="text/javascript">
var localSearch;
var map;
var icon;
var addressMarkerOptions;
google.load("search", "1");
google.load("maps", "2");
google.setOnLoadCallback(initialize);

function initialize()
{

    localSearch = new GlocalSearch();
    icon = new GIcon(G_DEFAULT_ICON);
    addressMarkerOptions = { icon:icon , draggable: false};

    map = new GMap2(document.getElementById("map_canvas"));
    map.addControl(new GSmallZoomControl3D ());
    var mapControl = new GMapTypeControl();
    plotAddress("<?php echo $postcode ?>");

}

/**
* This takes either a postcode or an address string
*
*/
function plotAddress(address)
{
  localSearch.setSearchCompleteCallback(null, 
function() {

  if (localSearch.results[0])
     {     
    var resultLat = localSearch.results[0].lat;
    var resultLng = localSearch.results[0].lng;
    var point = new GLatLng(resultLat,resultLng);
    var marker = new GMarker(point, addressMarkerOptions);
    map.setCenter(point, 15, G_HYBRID_MAP);
   }
});

localSearch.execute(address + ", UK");
}
</script>

HTML如下;

<div id="streetview">
    <div id="map_canvas" style="width: 250px; height: 250px"></div>
</div>

Wordpress - 使用元数据获取邮政编码并输出谷歌地图

1 个答案: