0

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

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

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

4

1 回答 1

1

我将展示我是如何做到的，但这是一年前的事了，基于谷歌地图/地理编码的更新，可能会有一个更新的、现代的答案。地理编码是将邮政编码转换为纬度/经度的过程的术语。当我使用它在各个帖子上显示地图时，这段代码都在我single.php的身上，你可以根据你的设置方式做不同的事情。

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

首先确保您在您的地图 API 中包含脚本<head>

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>
于 2012-10-06T13:18:05.850 回答