Question

我需要帮助保持我的代码干，我使用谷歌地图API，并且我使用他们提供的功能使信息窗口，我正在学校项目所以我没有高尔夫球场位置的API，它花钱，这只是一个学校项目而不是一个企业，所以我想循环这个为了在美国广泛的各个地方的高尔夫球场。< / p>

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

这就是我用于该页面的高度和对数已经改变，以显示加州棕榈沙漠的乡村俱乐部，不要担心文本信息只是一个例子，只需要看看是否有人可以帮助我循环使用我从10个乡村俱乐部组成的信息，我得到了我编写的另一个信息Json文件。

感谢阅读并希望社区能够帮助谢谢

＆＃13;

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);
  });
}

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 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));
}

编辑：以下是使用代码段代码的示例：

＆＃13;

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));
}
}

＆＃13;

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

＆＃13;

<!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>

＆＃13;

我需要帮助在Google Maps Api上循环虚假地点

1 个答案: