功能仅工作一次

Question

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

我创建了波纹管测试，以确保没有基于地图的代码引起问题，并向您显示出什么问题。

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

问题是，这只能运行一次。 如果您单击其他位置按钮，则什么也不会发生。 该信息不会使用新位置的信息进行更新。

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

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

我不知道是什么原因造成的，并且Google Dev Console没有显示任何错误。

 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

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

 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>