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

Load coords to google maps in my webpage

本文关键字：加载 谷歌地图 坐标 我的 网页      更新时间：2023-09-26

有没有办法将坐标（从csv文件、xlxs等）加载到我嵌入网页的谷歌地图中？我在网上看到的所有例子都只表明我必须登录到谷歌地图本身。我想做的是加载坐标并将标记放在这些坐标上。地图在我的网页上。有没有办法在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>

就像上面的代码一样，但我有多个坐标，那么，有没有一种方法或代码我的代码用来从文件加载坐标并向其添加标记..？

假设您知道如何从.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>

相关文章：