Question

我有一个PHP照片库，可以从图像中读取GPS坐标。我想修改它以使用坐标并在照片页面上包含谷歌地图。有没有一种简单的方法可以通过提供这对信息在HTML页面上显示谷歌地图？

感谢。

Answer 1

以下是一些可以帮助您入门的示例：

使用Google Maps API v2：

<!DOCTYPE html>
<html> 
<head>
   <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" style="width: 400px; height: 300px"></div> 

   <script type="text/javascript"> 
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(51.49, -0.12), 8);
   </script> 
</body> 
</html>

您只需更改GMap2.setCenter()方法中的纬度和经度即可。最后一个参数是缩放级别。

使用Google Maps API v3：

<!DOCTYPE html>
<html> 
<head>
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body>
   <div id="map" style="width: 400px; height: 300px"></div> 

   <script type="text/javascript"> 
      var myOptions = {
         zoom: 8,
         center: new google.maps.LatLng(51.49, -0.12),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById("map"), myOptions);
   </script> 
</body> 
</html>

使用Maps API的第3版时，您需要将参数作为选项传递给google.maps.Map()构造函数。上面的例子应该是自我解释的。

使用Static Map API：

<img src="https://maps.google.com/maps/api/staticmap?center=51.49,-0.12&zoom=8&size=400x300&sensor=false" style="width: 400px; height: 400px;" />

Static Map API，luca suggested可能是一个非常好的主意。

只需将纬度和经度参数传递到图像标记中，如上例所示。它会显示以下地图，直接从Google呈现：

Using the Static Maps API

Answer 2

使用静态谷歌地图，您必须提供其他一些额外信息

http://maps.google.com/maps/api/staticmap?center=51.477222,0&zoom=14&size=400x400&sensor=false

它只显示地图的图像

这是API的链接

https://developers.google.com/maps/documentation/maps-static/intro

如果需要，还有很多其他选项

Answer 3

由于您使用的是PHP，因此您也可以使用PHP Google Map API class，它刚刚更新为使用Google Maps JS API的V3。

根据GPS坐标将Google Map嵌入到HTML页面中

3 个答案:

使用Google Maps API v2：

使用Google Maps API v3：

使用Static Map API：