Google Maps API：使用总标记制作变量

【问题标题】：Google Maps API: Making Variables out of Total MarkersGoogle Maps API：使用总标记制作变量
【发布时间】：2020-03-08 10:20:45
【问题描述】：

对不起，如果之前已经回答过。我在做标题时被警告可能有类似的问题，但我没有找到任何东西。我正在做一个基于位置数据的基于统计的程序，但我不知道如何实际使用作为变量生成的结果。以下代码是我正在处理的基础，并根据纬度和经度提供多达 60 家附近的餐厅。有没有办法获取生成的标记总数，并将其转换为可以在其他内容中引用的变量，例如 HTML 表格或其他可以引用变量的类似项目？此外，提供的 API 应该可以工作，但您可能需要自己的 API 密钥。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Place search pagination</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #right-panel select, #right-panel input {
        font-size: 15px;
      }

      #right-panel select {
        width: 100%;
      }

      #right-panel i {
        font-size: 12px;
      }
      #right-panel {
        font-family: Arial, Helvetica, sans-serif;
        position: absolute;
        right: 5px;
        top: 60%;
        margin-top: -195px;
        height: 330px;
        width: 200px;
        padding: 5px;
        z-index: 5;
        border: 1px solid #999;
        background: #fff;
      }
      h2 {
        font-size: 22px;
        margin: 0 0 5px 0;
      }
      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        height: 271px;
        width: 200px;
        overflow-y: scroll;
      }
      li {
        background-color: #f1f1f1;
        padding: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      li:nth-child(odd) {
        background-color: #fcfcfc;
      }
      #more {
        width: 100%;
        margin: 5px 0 0 0;
      }
    </style>
    <script>
      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

      var map;

      function initMap() {
        // Create the map.
        var pyrmont = {lat: -33.866, lng: 151.196};
        map = new google.maps.Map(document.getElementById('map'), {
          center: pyrmont,
          zoom: 17
        });

        // Create the places service.
        var service = new google.maps.places.PlacesService(map);
        var getNextPage = null;
        var moreButton = document.getElementById('more');
        moreButton.onclick = function() {
          moreButton.disabled = true;
          if (getNextPage) getNextPage();
        };

        // Perform a nearby search.
        service.nearbySearch(
            {location: pyrmont, radius: 500, type: ['restaurants']},
            function(results, status, pagination) {
              if (status !== 'OK') return;

              createMarkers(results);
              moreButton.disabled = !pagination.hasNextPage;
              getNextPage = pagination.hasNextPage && function() {
                pagination.nextPage();
              };
            });
      }

      function createMarkers(places) {
        var bounds = new google.maps.LatLngBounds();
        var placesList = document.getElementById('places');

        for (var i = 0, place; place = places[i]; i++) {
          var image = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25)
          };

          var marker = new google.maps.Marker({
            map: map,

            title: place.name,
            position: place.geometry.location
          });

          var li = document.createElement('li');
          li.textContent = place.name;
          placesList.appendChild(li);
          document.getElementById('number_results').innerHTML = placesList.children.length + " returned";

          bounds.extend(place.geometry.location);
        }
        map.fitBounds(bounds);
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="right-panel">
      <h2>Results</h2>
      <div id="number_results"></div>
      <ul id="places"></ul>
      <button id="more">More results</button>
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYoCkx3owRBY3uLwBvW36B0GNeMQtBm1o&libraries=places&callback=initMap" async defer></script>
  </body>
</html>

代码 sn-p：

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

var map;

function initMap() {
  // Create the map.
  var pyrmont = {
    lat: -33.866,
    lng: 151.196
  };
  map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 17
  });

  // Create the places service.
  var service = new google.maps.places.PlacesService(map);
  var getNextPage = null;
  var moreButton = document.getElementById('more');
  moreButton.onclick = function() {
    moreButton.disabled = true;
    if (getNextPage) getNextPage();
  };

  // Perform a nearby search.
  service.nearbySearch({
      location: pyrmont,
      radius: 500,
      type: ['restaurants']
    },
    function(results, status, pagination) {
      if (status !== 'OK') return;

      createMarkers(results);
      moreButton.disabled = !pagination.hasNextPage;
      getNextPage = pagination.hasNextPage && function() {
        pagination.nextPage();
      };
    });
}

function createMarkers(places) {
  var bounds = new google.maps.LatLngBounds();
  var placesList = document.getElementById('places');

  for (var i = 0, place; place = places[i]; i++) {
    var image = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    var marker = new google.maps.Marker({
      map: map,

      title: place.name,
      position: place.geometry.location
    });

    var li = document.createElement('li');
    li.textContent = place.name;
    placesList.appendChild(li);
    document.getElementById('number_results').innerHTML = placesList.children.length + " returned";

    bounds.extend(place.geometry.location);
  }
  map.fitBounds(bounds);
}
/* Always set the map height explicitly to define the size of the div
           * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

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

#right-panel {
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select,
#right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}

#right-panel {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  right: 5px;
  top: 60%;
  margin-top: -195px;
  height: 330px;
  width: 200px;
  padding: 5px;
  z-index: 5;
  border: 1px solid #999;
  background: #fff;
}

h2 {
  font-size: 22px;
  margin: 0 0 5px 0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 271px;
  width: 200px;
  overflow-y: scroll;
}

li {
  background-color: #f1f1f1;
  padding: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

li:nth-child(odd) {
  background-color: #fcfcfc;
}

#more {
  width: 100%;
  margin: 5px 0 0 0;
}
<div id="map"></div>
<div id="right-panel">
  <h2>Results</h2>
  <div id="number_results"></div>
  <ul id="places"></ul>
  <button id="more">More results</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>

编辑：为了让这个问题更容易回答，我在下面添加了一个更完整的 html 版本。 （它有一些问题，例如地图没有更新它的标记，但这完全是一个单独的问题）。我在这段代码的底部添加了一个表格，其中包含以下短语 document.getElementById("val").innerHTML = "根据您的纬度"+lat+"和经度"+lng+"，库总数为："+SomethingSomethingSomething+"。"; 但我不知道如何从结果中获取要引用的变量。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Base Mapper V2</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script type="text/javascript" src="/js/lib/dummy.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <style id="compiled-css" type="text/css">
#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #fff
}

#right-panel {
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select,
#right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}

#right-panel {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  right: 5px;
  top: 60%;
  margin-top: -395px;
  height: 650px;
  width: 200px;
  padding: 10px;
  padding-left: 10px;
  z-index: 10;
  border: 1px solid #999;
  background: #fff;
}

h2 {
  font-size: 23px;
  margin: 0 0 5px 0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 580px;
  width: 200px;
  overflow-y: scroll;
}

li {
  background-color: #ffc965;
  padding: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

li:nth-child(odd) {
  background-color: #fff065;
}

#more {
  width: 100%;
  margin: 5px 0 0 0;
}

input[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #ffefe5
}

.container {
  border-radius: 5px;
  background-color: #fff
  padding: 80px;
  width: 80%
}
button {
    width: 100%;
    background-color: #8f20b6;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #cba00d;
}
table {
    width: 100%;
    background-color: #8f20b6;
    color: white;
    padding: 25px 0px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
}

  </style>
</head>
<body>
    <div class="container">
  <form id="mapCenterForm" action="" onsubmit="return false;">
    <label for="latitude">lat</label>
    <input type="text" id="lat" name="latitude" placeholder="0.000000">

    <label for="longitude">lng</label>
    <input type="text" id="lng" name="longitude" placeholder="0.000000">
    <br>
    <button onclick="change_center(); return false">
      Submit
    </button>
  </form>
  <div id="map" style="height: 500px"></div>

</div>
<div id="right-panel">
  <h2>Locations</h2>
  <div id="number_results"></div>
  <ul id="places"></ul>
  <button id="more">More Results</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBYoCkx3owRBY3uLwBvW36B0GNeMQtBm1o&callback=initMap" async defer></script>

  <script type="text/javascript">


var red_icon = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
var map;
var lat = 41.18076;
var lng = -73.20537;

function initMap() {
  // Create the map.
  var SET = {
    lat: lat,
    lng: lng
  };
  map = new google.maps.Map(document.getElementById('map'), {
    center: SET,
    zoom: 13
  });
  google.maps.event.addListener(map, 'click', function(e) {
    document.getElementById('lat').value = e.latLng.lat();
    document.getElementById('lng').value = e.latLng.lng();
  })

  // Create the places service.
  var service = new google.maps.places.PlacesService(map);
  var getNextPage = null;
  var moreButton = document.getElementById('more');
  moreButton.onclick = function() {
    moreButton.disabled = true;
    if (getNextPage) getNextPage();
  };

  // Perform a nearby search.
  service.nearbySearch({
      location: SET,
      radius: 9500,
      keyword: "library"
    },

    function(results, status, pagination) {
      if (status !== 'OK') return;

      createMarkers(results);
      moreButton.disabled = !pagination.hasNextPage;
      getNextPage = pagination.hasNextPage && function() {
        pagination.nextPage();
      };
    });
}

function createMarkers(places) {
  var bounds = new google.maps.LatLngBounds();
  var placesList = document.getElementById('places');

  for (var i = 0, place; place = places[i]; i++) {
    var image = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    var marker = new google.maps.Marker({
      map: map,
      icon: red_icon,
      title: place.name,
      position: place.geometry.location
    });

    var li = document.createElement('li');
    li.textContent = place.name;
    placesList.appendChild(li);
    document.getElementById('number_results').innerHTML = placesList.children.length+" returned";
    bounds.extend(place.geometry.location);
    var spookRating1= li*100
  }
  map.fitBounds(bounds);
}

function change_center() {
  var newLat = parseFloat(document.getElementById("lat").value);
  var newLng = parseFloat(document.getElementById("lng").value);

  map.setCenter({
    lat: newLat,
    lng: newLng
  });
  return false;
}

  </script>

  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "r96szuhx"
      }], "*")
    }

    // always overwrite window.name, in case users try to set it manually
    window.name = "result"
  </script>
  <table>
  <tr><th id="val"></th></tr>
  </table>
  <script type="text/javascript" font=24>
  document.getElementById("val").innerHTML = "Based on your latitude of "+lat+" and longitude of "+lng+", the total number of libraries are: "+results.length+".";
  </script>
</body>
</html>

【问题讨论】：

  • 我倾向于看看results.length 是否返回结果数。
  • 为了测试这一点，我做了一行 document.getElementById("val").innerHTML = "Lat: "+lat+" Lng: "+lng+" Total: "+results.length+"。 ";但 results.length 未定义。 “li”和“placesList.children.length”产生类似的错误，“number_results”产生[object HTMLDivElement]
  • 您确定在 Google 返回结果后检查了 results.length 吗？
  • 你在哪里（或者你想在哪里）使用结果数？如果它们已被返回，document.getElementById('places').children.length 应该包含该值（placesList 是 document.getElementById('places')）。
  • 对于 Mike Poole，我相信我添加了 results.length 以进行仔细检查，但这对我来说不起作用。然而，我可能在设置方式上做错了什么，所以这很可能是正确的。对于geocodezip，我只是要在屏幕底部的简单消息结果中使用变量来证明结果是可以引用的变量。为了使问题更清楚，我编辑了问题，以提供更多代码，这或多或少是我正在使用的。

标签： html api google-maps counter


【解决方案1】：

document.getElementById('places').children.length 将包含显示的结果数（第一个请求最多 20 个，3 个请求最多 60 个）。

这将更新您的表格：

document.getElementById("val").innerHTML = "Based on your latitude of " + lat + " and longitude of " + lng + ", the total number of libraries are: " + document.getElementById('places').children.length + ".";

但是您需要在响应返回时调用它（在 createMarkers 函数中有效）：

function createMarkers(places) {
  var bounds = new google.maps.LatLngBounds();
  var placesList = document.getElementById('places');

  for (var i = 0, place; place = places[i]; i++) {
    var image = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    var marker = new google.maps.Marker({
      map: map,
      icon: red_icon,
      title: place.name,
      position: place.geometry.location
    });

    var li = document.createElement('li');
    li.textContent = place.name;
    placesList.appendChild(li);
    document.getElementById('number_results').innerHTML = placesList.children.length + " returned";
    bounds.extend(place.geometry.location);
    var spookRating1 = li * 100
  }
  map.fitBounds(bounds);
  document.getElementById("val").innerHTML = "Based on your latitude of " + lat + " and longitude of " + lng + ", the total number of libraries are: " + document.getElementById('places').children.length + ".";
}

代码 sn-p：

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #fff
}

#right-panel {
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select,
#right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}

#right-panel {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  right: 5px;
  top: 60%;
  margin-top: -395px;
  height: 650px;
  width: 200px;
  padding: 10px;
  padding-left: 10px;
  z-index: 10;
  border: 1px solid #999;
  background: #fff;
}

h2 {
  font-size: 23px;
  margin: 0 0 5px 0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 580px;
  width: 200px;
  overflow-y: scroll;
}

li {
  background-color: #ffc965;
  padding: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

li:nth-child(odd) {
  background-color: #fff065;
}

#more {
  width: 100%;
  margin: 5px 0 0 0;
}

input[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #ffefe5
}

.container {
  border-radius: 5px;
  background-color: #fff padding: 80px;
  width: 80%
}

button {
  width: 100%;
  background-color: #8f20b6;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #cba00d;
}

table {
  width: 100%;
  background-color: #8f20b6;
  color: white;
  padding: 25px 0px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
}
<div class="container">
  <form id="mapCenterForm" action="" onsubmit="return false;">
    <label for="latitude">lat</label>
    <input type="text" id="lat" name="latitude" placeholder="0.000000">

    <label for="longitude">lng</label>
    <input type="text" id="lng" name="longitude" placeholder="0.000000">
    <br>
    <button onclick="change_center(); return false">
      Submit
    </button>
  </form>
  <div id="map" style="height: 500px"></div>

</div>
<div id="right-panel">
  <h2>Locations</h2>
  <div id="number_results"></div>
  <ul id="places"></ul>
  <button id="more">More Results</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

<script type="text/javascript">
  var red_icon = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
  var map;
  var lat = 41.18076;
  var lng = -73.20537;

  function initMap() {
    // Create the map.
    var SET = {
      lat: lat,
      lng: lng
    };
    map = new google.maps.Map(document.getElementById('map'), {
      center: SET,
      zoom: 13
    });
    google.maps.event.addListener(map, 'click', function(e) {
      document.getElementById('lat').value = e.latLng.lat();
      document.getElementById('lng').value = e.latLng.lng();
    })

    // Create the places service.
    var service = new google.maps.places.PlacesService(map);
    var getNextPage = null;
    var moreButton = document.getElementById('more');
    moreButton.onclick = function() {
      moreButton.disabled = true;
      if (getNextPage) getNextPage();
    };

    // Perform a nearby search.
    service.nearbySearch({
        location: SET,
        radius: 9500,
        keyword: "library"
      },

      function(results, status, pagination) {
        if (status !== 'OK') return;

        createMarkers(results);
        moreButton.disabled = !pagination.hasNextPage;
        getNextPage = pagination.hasNextPage && function() {
          pagination.nextPage();
        };
      });
  }

  function createMarkers(places) {
    var bounds = new google.maps.LatLngBounds();
    var placesList = document.getElementById('places');

    for (var i = 0, place; place = places[i]; i++) {
      var marker = new google.maps.Marker({
        map: map,
        icon: red_icon,
        title: place.name,
        position: place.geometry.location
      });

      var li = document.createElement('li');
      li.textContent = place.name;
      placesList.appendChild(li);
      document.getElementById('number_results').innerHTML = placesList.children.length + " returned";
      bounds.extend(place.geometry.location);
      var spookRating1 = li * 100
    }
    map.fitBounds(bounds);
    document.getElementById("val").innerHTML = "Based on your latitude of " + lat + " and longitude of " + lng + ", the total number of libraries are: " + document.getElementById('places').children.length + ".";
  }

  function change_center() {
    var newLat = parseFloat(document.getElementById("lat").value);
    var newLng = parseFloat(document.getElementById("lng").value);

    map.setCenter({
      lat: newLat,
      lng: newLng
    });
    return false;
  }
</script>

<table>
  <tr>
    <th id="val"></th>
  </tr>
</table>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2014-02-13
    • 2011-10-30
    • 1970-01-01
    • 1970-01-01
    • 2017-10-03
    • 2017-12-21
    • 1970-01-01
    • 2012-01-25
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode