代码之家 › 专栏 › 技术社区 › windyjonas

基于地址自定义字段在WordPress中呈现谷歌地图

google-maps wordpress javascript

windyjonas · 技术社区 · 16 年前

我有一个WordPress网站,有很多页面,每个页面代表一个物理位置。现在,对于每个页面,我都希望根据地址显示一个谷歌地图。我知道我可以通过安装geo mashup插件来实现这一点。 http://wordpress.org/extend/plugins/geo-mashup/ 但这需要(我相信)我手动为每个帖子创建一个基于地址的位置,并在帖子/页面中添加一个导致谷歌地图的短代码。这是一个有数百个地点的网站的大量工作。

我想能够

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

A很容易,但B呢?

2 回复 | 直到 16 年前

Daniel Vassallo 16 年前

您可以考虑使用 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 无法从地址检索坐标。

Sashi 14 年前

现在这已经是过时的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>