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

回答

相关问题