javascript - 功能只工作一次

Question

我正在开发一个基于 map 的项目，并一直在使用这个库从 Google 获取有关 map 上位置的信息 - https://github.com/peledies/google-places

我创建了以下测试，以确保没有任何基于 map 的代码引起问题，并向您展示问题所在。

这个想法是，您可以单击一个按钮，将 Google 地点 ID 传递给 getInfo() 函数，该函数将使用该库并从 Google 提取信息并将其显示在页面上。

问题是这只有效一次。如果您单击其他位置按钮，则不会发生任何情况。该信息不会根据新位置的信息进行更新。

我什至添加了一个清除按钮，它将删除页面上与 google 相关的 div 中的所有内容。

我在函数中放置了一个 console.log，可以看到当单击按钮时，ID 被传递给它。

我不知道是什么原因导致此问题，并且 Google 开发控制台没有显示任何错误。

function getInfo(p) {
  console.log(p);
  $("#google-reviews").googlePlaces({
    placeId: p,
    render: ['reviews', 'address', 'phone', 'hours'],
    min_rating: 1,
    max_rows: 3,
    //rotateTime:5000,
    schema: {
      displayElement: '#schema', // optional, will use "#schema" by default
      beforeText: 'Googlers rated',
      middleText: 'based on',
      afterText: 'awesome reviewers.',
      type: 'Hostel',
    },
    address: {
      displayElement: "#google-address" // optional, will use "#google-address" by default
    },
    phone: {
      displayElement: "#google-phone" // optional, will use "#google-phone" by default
    },
    hours: {
      displayElement: "#google-hours" // optional, will use "#google-hours" by default
    }
  });
}


function clearInfo() {
  document.getElementById('schema').innerHTML = "";
  document.getElementById('google-reviews').innerHTML = "";
  document.getElementById('google-address').innerHTML = "";
  document.getElementById('google-phone').innerHTML = "";
  document.getElementById('google-hours').innerHTML = "";
}

.review-stars ul {
  display: inline-block;
  list-style: none;
}

.review-stars ul li {
  float: left;
  margin-right: 5px;
}

.review-stars ul li i {
  color: #E4B248;
  font-size: 12px;
}


/*color: #E4B248;*/

.review-stars ul li i.inactive {
  color: #c6c6c6;
}

.star:after {
  content: "\2605";
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

<button onclick="getInfo('ChIJ7aUBOtBqdkgRMzcGmyqWyxM')">Location 1 (Watford)</button>
<button onclick="getInfo('ChIJ3xiQIe6g2EcRdkyT0iS5GNU')">Location 2 (Buckhurst Hill)</button>
<button onclick="clearInfo()">Clear</button>
<br>
<div id="schema">
  <b>Schema - </b>
</div>
<div id="google-reviews"></div>
<div id="google-address"></div>
<div id="google-phone"></div>
<div id="google-hours"></div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" crossorigin="anonymous"></script>
<script src="https://rawgit.com/peledies/google-places/master/google-places.js"></script>

Answer 1

通过查看插件的代码，似乎只能初始化一次。除了插件之外，它还直接向 jQuery 对象添加一个 googlePlaces 函数。您可以改用该函数，下面是一个示例:

function getInfo(p) {
  clearInfo();
  $.googlePlaces($("#google-reviews"), {
    placeId: p,
    render: ['reviews', 'address', 'phone', 'hours'],
    min_rating: 1,
    max_rows: 3,
    //rotateTime:5000,
    schema: {
      displayElement: '#schema', // optional, will use "#schema" by default
      beforeText: 'Googlers rated',
      middleText: 'based on',
      afterText: 'awesome reviewers.',
      type: 'Hostel',
    },
    address: {
      displayElement: "#google-address" // optional, will use "#google-address" by default
    },
    phone: {
      displayElement: "#google-phone" // optional, will use "#google-phone" by default
    },
    hours: {
      displayElement: "#google-hours" // optional, will use "#google-hours" by default
    }
  });
}


function clearInfo() {
  document.getElementById('schema').innerHTML = "";
  document.getElementById('google-reviews').innerHTML = "";
  document.getElementById('google-address').innerHTML = "";
  document.getElementById('google-phone').innerHTML = "";
  document.getElementById('google-hours').innerHTML = "";
}

.review-stars ul {
  display: inline-block;
  list-style: none;
}

.review-stars ul li {
  float: left;
  margin-right: 5px;
}

.review-stars ul li i {
  color: #E4B248;
  font-size: 12px;
}


/*color: #E4B248;*/

.review-stars ul li i.inactive {
  color: #c6c6c6;
}

.star:after {
  content: "\2605";
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

<button onclick="getInfo('ChIJ7aUBOtBqdkgRMzcGmyqWyxM')">Location 1 (Watford)</button>
<button onclick="getInfo('ChIJ3xiQIe6g2EcRdkyT0iS5GNU')">Location 2 (Buckhurst Hill)</button>
<br>
<div id="schema">
  <b>Schema - </b>
</div>
<div id="google-reviews"></div>
<div id="google-address"></div>
<div id="google-phone"></div>
<div id="google-hours"></div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" crossorigin="anonymous"></script>
<script src="https://rawgit.com/peledies/google-places/master/google-places.js"></script>