根据地址自定义字段在 wordpress 中渲染谷歌地图答案

【问题标题】：Render google map in wordpress, based on address custom field根据地址自定义字段在 wordpress 中渲染谷歌地图
【发布时间】：2010-02-19 15:40:37
【问题描述】：

我有一个包含大量页面的 wordpress 站点，每个页面代表一个物理位置。现在对于每个页面，我想根据地址显示一个谷歌地图。我知道我可以通过安装例如 Geo Mashup 插件 http://wordpress.org/extend/plugins/geo-mashup/ 来做到这一点，但这需要（我相信）我手动为每个帖子创建一个基于地址的位置，并将一个短代码添加到结果的帖子/页面在谷歌地图中。对于这个拥有数百个地点的网站来说，这是一项艰巨的工作。

我希望能够

A：创建一个“地址自定义字段” 以编程方式为每个帖子。
B：在页面模板使用该自定义字段渲染谷歌地图。

A 很简单，但是 B 呢？

【问题讨论】：

标签： javascript wordpress google-maps

【解决方案1】：

您可能需要考虑使用Google Maps API。

以下示例可以帮助您入门。您需要做的就是将 JavaScript 变量 yourAddress 更改为页面中位置功能的地址。 “如果 A 很简单”，那应该很简单。

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
            type="text/javascript"></script> 
  </head> 
  <body onunload="GUnload()"> 

    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    var yourAddress = 'London, UK';

    if (GBrowserIsCompatible()) {
       var geocoder = new GClientGeocoder();
       geocoder.getLocations(yourAddress, function (locations) {         
          if (locations.Placemark)
          {
             var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
             var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
             var east  = locations.Placemark[0].ExtendedData.LatLonBox.east;
             var west  = locations.Placemark[0].ExtendedData.LatLonBox.west;

             var bounds = new GLatLngBounds(new GLatLng(south, west), 
                                            new GLatLng(north, east));

             var map = new GMap2(document.getElementById("map_canvas"));

             map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
          }
       });
    }
    </script> 
  </body> 
</html>

上面的例子会渲染一张像下面这样的地图：

Render google map in wordpress, based on address custom field http://img716.imageshack.us/img716/7267/london.jpg

如果Google Client-side Geocoder 无法从地址中检索坐标，地图将不会显示。

【讨论】：

谢谢，太好了。我注意到我必须将我的 Google Maps API 密钥作为 get 参数添加到 javascript 调用中。 (key=)
@windyjonas：如果您使用最新版本的 Maps API (v3)，则不需要密钥。

【解决方案2】：

这现在已过时 Google 移除的 v2 服务。

使用类似的东西

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

【讨论】：

你的例子中的地址是怎么用的？