將JavaScript添加到數組中並將其顯示在html中

我正在使用來自Google的一段代碼，試圖改變它，使得替代windows.alerting LT/LN座標，座標得到保存在一個數組中然後可以顯示在某種表格中。將JavaScript添加到數組中並將其顯示在html中

function geocodeAddress(geocoder, resultsMap) { 
    var cords = []; //my array 
    var address = document.getElementById('address').value; 
    geocoder.geocode({'address': address}, function(results, status) { 
     if (status === 'OK') { 
     window.alert("Coordinates:" + results[0].geometry.location); //current alert   
     cords.push(results[0].geometry.location); //adding to an Array    
     } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
    }

我很生鏽的JS，所以我甚至不知道它是否存儲在數組中。我嘗試了很多種方法來顯示數組到屏幕上，但沒有任何工作，我不知道這是否因爲沒有存儲在數組中，或者因爲我沒有正確顯示數組。

明確提出：關於如何存儲陣列&這些座標我應該如何去顯示這個陣列在屏幕上任何想法？乾杯。

來源

2016-11-15 Dansmith12

您可以用'的console.log（軟線）'和開放的開發工具（F12）查看輸出，但它看起來* *罰款。至於將它們添加到html，有一個可能的解決方案的傳說;這裏是一個香草JS實現：http://stackoverflow.com/questions/5886144/create-divs-from-array-elements – Pogrindis

如果你想顯示HTML數組：

HTML：

<div data-cords></div>

JS：

var html = ''; 
cords.forEach(function(cord) { 
    html += cord + '<br>'; 
}); 
document.querySelector('[data-cords]').innerHTML = html;

否則，您可以在開發者控制檯打印數組：

console.log(cords);

或者，如果你想alert它，你可以使用相同的結構如上：

var alertMessage = ''; 
cords.forEach(function(cord) { 
    alertMessage += cord + '\n'; // new line character 
}); 
alert(alertMessage);

來源

2016-11-15 12:51:33 Phortuin

你爲什麼選擇使用自定義的HTML屬性？ – Pogrindis

我更喜歡使用數據屬性來將行爲與JS綁定到HTML元素，而不是id或類名。規模更好，單一職責（無CSS/JS干擾）。此外，它是一個常規的'div'元素，具有數據屬性，它已經在瀏覽器中用於年齡標準的東西 – Phortuin

我希望這會幫助你。

var cords = []; 
 
function searchAddress() { 
 
    var addressInput = document.getElementById('address-input').value; 
 
    document.getElementById('address-input').value = ""; 
 

 
    var geocoder = new google.maps.Geocoder(); 
 

 
    geocoder.geocode({address: addressInput}, function(results, status) { 
 

 
    if (status == google.maps.GeocoderStatus.OK) { 
 

 
     var myResult = results[0].geometry.location; // reference LatLng value 
 
     
 
     cords.push(myResult); 
 
     
 
     document.getElementById('add-loc').appendChild(generateList(cords)); 
 
     
 
    } else { 
 
    // warning message 
 
    alert("The Geocode was not successful for the following reason: " + status); 
 

 
    } 
 
}); 
 

 
} 
 

 
function generateList(array) { 
 
    // Create the list element: 
 
    var list = document.createElement('ul'); 
 

 
    for(var i = 0; i < array.length; i++) { 
 
     // Create the list item: 
 
     var item = document.createElement('li'); 
 

 
     // Set its contents: 
 
     item.appendChild(document.createTextNode(array[i])); 
 

 
     // Add it to the list: 
 
     list.appendChild(item); 
 
    } 
 

 
    // Finally, return the constructed list: 
 
    return list; 
 
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
 
    
 
<body> 
 
    <div> 
 
     Enter address <input type="text" id="address-input"> 
 
     <button onclick="searchAddress();">Search</button> 
 
    </div> 
 
    <div id="add-loc"></div> 
 
    </body>

來源

2016-11-15 13:51:40 WitVault

@Dansmith它可以幫助你嗎？ – WitVault

將JavaScript添加到數組中並將其顯示在html中

回答

相關問題