根据GPS坐标将谷歌地图嵌入到HTML页面中

php google-maps

2022-08-30 19:03:04

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

谢谢。

答案 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>

使用版本 3 的 Maps API 时，需要将参数作为选项传递给构造函数。上面的例子应该是不言自明的。google.maps.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;" />

正如luca所建议的那样，Static Map API可能是一个非常好的主意。

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

Using the Static Maps API

答案 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

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