在我的网页中将坐标加载到Google地图

Question

有什么方法可以将坐标（从csv文件， xlxs等）加载到我嵌入到网页中的Google地图上？ 我在网上看到的所有示例仅显示我必须登录到Google地图本身。 我要做的是加载坐标并将标记放置到这些坐标上。 该地图在我的网页中。有没有办法用JavaScript做到这一点？

 <!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js"> </script> <script> var myCenter=new google.maps.LatLng(51.508742,-0.120850); function initialize() { var mapProp = { center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker=new google.maps.Marker({ position:myCenter, }); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html> 

像上面的代码一样，但是我有多个坐标，因此，有没有一种方法或代码可以用来从文件中加载坐标并向其中添加标记。

Answer 1

假设您知道如何从.csv读取数据，并且知道如何将其转换为array 。

因此，您可以像这样遍历数组并添加标记：

 // get the file content via ajax var csvContent = document.querySelector('#json').value; var coords = []; [].forEach.call(csvContent.split(/\\n/g), function(a) { coords.push(a.split(',')); }); markers = []; var myCenter = new google.maps.LatLng(51.508742,-0.120850); function initialize() { var mapProp = { center:myCenter, zoom:11, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); for (var i = 0; i < coords.length; i++) { var marker = new google.maps.Marker({ position:new google.maps.LatLng(coords[i][0], coords[1][1]) }); marker.setMap(map); } } google.maps.event.addDomListener(window, 'load', initialize); 

 <script src="http://maps.googleapis.com/maps/api/js"></script> JSON file: <textarea id="json"> 51.5086,-0.12086 51.5186,-0.12087 51.5286,-0.12088 </textarea> <hr /> <div id="googleMap" style="width:500px;height:380px;"></div>