簡體   English   中英

功能僅工作一次

[英]Function only working once

我正在研究一個基於地圖的項目,並且一直在使用該庫從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> 

通過查看插件的代碼,似乎只能初始化一次。 除了插件外,它還將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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM