Google Maps JSON文件示例

最新推荐文章于 2023-08-20 21:42:34 发布

dingshi7798

最新推荐文章于 2023-08-20 21:42:34 发布

阅读量367

点赞数

文章标签： json 数据库 javascript ViewUI

本系列文章于2017年中用最新信息和新鲜示例进行了重写。

Google Maps是Google于2005年推出的在线地图服务。 它提供了多种服务，包括路线规划，卫星图像，实时交通更新以及许多其他服务。 就个人而言，我经常使用它来找到到达地点的路线。

根据GlobalWebIndex进行的一项调查，在移动电话领域，Google Maps已成为最受欢迎的智能手机应用程序之一，并在2013年排名第一。它还具有允许开发人员将其嵌入其网站的API。

在此示例中，我将向您展示如何在Google Map上设置多个标记。我们可以使用以下JSON格式通过其API向Google Maps提供标记信息。该数据可以存储在可以远程访问的文件中，也可以存储在可以通过本地API服务检索的数据库中。

标记JSON数据：

{
  "markers": [
    {
      "name": "Rixos The Palm Dubai",
      "position": [25.1212, 55.1535],
    },
    {
      "name": "Shangri-La Hotel",
      "location": [25.2084, 55.2719]
    },
    {
      "name": "Grand Hyatt",
      "location": [25.2285, 55.3273]
    }
  ]
}

如果您要实施长期解决方案，则需要一个API密钥。一旦有了它，就可以在代码中使用它，如下所示：

API密钥用法 ：

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=loadMap">
</script>

在此示例中，我们无需使用密钥即可访问Google Maps API。期望收到有关此的警告（在控制台中）。为简单起见，我将在一个HTML文件中向您展示整个工作代码。

HTML + JavaScript ：

<!DOCTYPE html>
<html>
  <head>
   <title>Dubai Hotels</title>
  </head>

  <body onload = "loadMap()">
    <h2>Dubai Hotels</h2>
    <div id = "map" style = "width:640px; height:480px;"></div>
      <script>

        // fake JSON call
        function getJSONMarkers() {
          const markers = [
            {
              name:  "Rixos The Palm",
              location: [25.1212, 55.1535]
            },
            {
              name: "Shangri-La Hotel",
              location: [25.2084, 55.2719]
            },
            {
              name: "Grand Hyatt",
              location: [25.2285, 55.3273]
            }
          ];
          return markers;
        }

        function loadMap() {
          // Initialize Google Maps
          const mapOptions = {
            center:new google.maps.LatLng(25.2048, 55.2708),
            zoom: 11
          }
          const map = new google.maps.Map(document.getElementById("map"), mapOptions);

          // Load JSON Data
          const hotelMarkers = getJSONMarkers();

          // Initialize Google Markers
          for(hotel of hotelMarkers) {
            let marker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(hotel.location[0], hotel.location[1]),
              title: hotel.name
            })
          }
        }
      </script>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
  </body>
</html>

要了解有关此处已使用的Google Map类的更多信息，您可以查看以下参考手册：