Question

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

我已经创建了波纹管测试，以确保没有任何基于地图的代码导致问题并向您显示错误。

您的想法是，您可以点击一个按钮，该按钮会将Google地方信息ID传递给getInfo（）函数，该函数将使用该库并从Google获取信息并将其显示在页面上。

问题是这只能运作一次。如果单击其他位置按钮，则似乎没有任何事情发生。该信息未使用新位置的信息进行更新。

我甚至添加了一个清除按钮，该按钮将删除页面上谷歌相关div中的任何内容。

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

我不知道可能导致此问题的原因，Google Dev Console也不会显示任何错误。

＆＃13;

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 = "";
}

＆＃13;

.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";
}

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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 = "";
}

＆＃13;

.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";
}

＆＃13;

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

＆＃13;

功能仅工作一次

1 个答案: