我需要帮助在 Google Maps Api 上循环虚假位置答案

【问题标题】：I Need Help Looping Fake Locations On Google Maps Api我需要帮助在 Google Maps Api 上循环虚假位置
【发布时间】：2015-12-29 19:39:15
【问题描述】：

您好，我需要帮助来保持我的代码干燥，我正在使用谷歌地图 API，并且我正在使用他们提供的制作信息窗口的功能，我正在做一个学校项目，所以我没有高尔夫球场位置的 API，它要花钱，这只是一个学校项目而不是一个企业，所以我想循环这个来使美国各地的高尔夫球场遍布美国。

我已经为一些高尔夫球场制作了一个带有虚假信息的巨大 Json 文件，我想知道你们是否知道如何循环这个示例并将我的 json 地址实现到谷歌地图 API 中，这样当我打开我的页面时它将在地图上显示落点以及访问高尔夫球场网站的信息和网站。

这是我在页面中使用的，高度和对数已更改为显示加利福尼亚棕榈沙漠的乡村俱乐部，不要担心文本信息只是一个示例，只需要看看是否有人可以帮助我用我在另一个我制作的 Json 信息文件中获得的 10 个乡村俱乐部的信息来循环这个。

感谢您的阅读，希望社区可以帮助谢谢

function initMap() {
  var uluru = {
    lat: 33.745990,
    lng: -116.315722
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the ' +
    'Northern Territory, .</p>' +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
    '(last visited June 22, 2009).</p>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Info windows</title>
</head>

<body>
  <div id="map"></div>
  <script>
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
</body>

</html>

【问题讨论】：

标签： javascript html css api google-maps

【解决方案1】：

如果您无法访问可以为您的 json 文件提供服务的 Web 服务器，最简单的方法是将您的 json 调整到 javascript 变量中：

var locations = [{
    "name": "Uluru",
    "description": "Also known as Ayers rock",
    "lat": "33.745990",
    "lon": "-116.315722"
}, {
    "name": "Mt. Everest", 
    "description": "Located in the himalayas",
    "lat": "33.745990",
    "lon": "-116.315722"   
}];

尽可能多地放入，将它们放入脚本文件（例如，places.js）中，并像在 HTML 头部中的任何其他 javascript 文件一样包含它们。

然后，您可以在主脚本文件中使用该变量，循环遍历 JSON 数组并为每个数组添加标记。

for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i].lat, locations[i].lon),
        map: map,
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i].description);
          infowindow.open(map, marker);
        }
      })(marker, i));
}

编辑：这是一个使用 sn-p 代码的示例：

function initMap() {
var locations = [{
    "name": "Uluru",
    "description": "Also known as Ayers rock",
    "lat": "33.745990",
    "lon": "-116.215622"
}, {
    "name": "Mt. Everest", 
    "description": "Located in the himalayas",
    "lat": "33.746990",
    "lon": "-116.315722"   
}];
  var uluru = {
    lat: 33.745990,
    lng: -116.315722
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the ' +
    'Northern Territory, .</p>' +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
    '(last visited June 22, 2009).</p>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  for (i = 0; i < locations.length; i++) {  

  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i].lat, locations[i].lon),
    map: map,
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i].description);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #000;
  border: 2px solid #000;
}
#map {
  height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Info windows</title>
</head>

<body>
  <div id="map"></div>
  <script>
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
</body>

</html>

【讨论】：

哇，伙计，这是个好建议，我一定要试一试，很快就会发布我的结果，谢谢。
嘿，我将它添加到我的谷歌地图 API，在我的 main.js 中，我尝试将循环放在它上面，但现在地图不会显示，嗯，我想知道我做错了什么，哦，好吧继续努力谢谢
编辑我的代码以添加原始答案中的 sn-p