Question

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

我希望能够

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

A很容易，但B？

Answer 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无法从地址中检索坐标，地图将不会显示。

Answer 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>

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

2 个答案: