使用Javascript从html表中的数据在Google地图上显示多个标记_Javascript_Jquery_Html_Google Maps

使用Javascript从html表中的数据在Google地图上显示多个标记

javascript jquery html google-maps

使用Javascript从html表中的数据在Google地图上显示多个标记,javascript,jquery,html,google-maps,Javascript,Jquery,Html,Google Maps,我试图在google地图上为同一页面上加载的html表的每一行显示一个标记因此html表的标题是“Site”、“Lat”和“Lon”。我需要使用JQuery来刮取行值，并将它们放入谷歌地图的var位置，该地图将显示在本例的表格下方（我需要在我的应用程序的表格上方使用它，但一旦它起作用，我可以自己做）我差一点就把它弄到手了，但就是没法让它发挥作用 HTML <table> <thead> <th> Site </th> <th&g

我试图在google地图上为同一页面上加载的html表的每一行显示一个标记

因此html表的标题是“Site”、“Lat”和“Lon”。我需要使用JQuery来刮取行值，并将它们放入谷歌地图的var位置，该地图将显示在本例的表格下方（我需要在我的应用程序的表格上方使用它，但一旦它起作用，我可以自己做）

我差一点就把它弄到手了，但就是没法让它发挥作用

HTML

<table>
<thead>
  <th> Site </th>
  <th> Lat </th>
  <th> Lon </th>
</thead>
    <tbody>
        <tr>
            <td>Site 1</td>
            <td>53.19373465</td>
            <td>-6.39347735</td>
        </tr>
        <tr>
            <td>Site 2</td>
            <td>53.19373465</td>
            <td>-6.39347735</td>
        </tr>
        <tr>
            <td>Site 3</td>
            <td>53.19373465</td>
            <td>-6.39347735</td>
        </tr>
    </tbody>
</table>
<script
  src=
"http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-          FxYoVTVq6Is6lD98">
</script>

 <body onload="initialize()">
  <div id="default" style="width:100%; height:100%"></div>
 </body>

Javascript/JQuery

var table = $("table tbody");

    table.find('tr').each(function (i) {
        var $tds = $(this).find('td'),
            siteName = $tds.eq(0).text(),
            Lat = $tds.eq(1).text();
            Lon = $tds.eq(2).text();
        // do something with siteName, timeStamp, Lat, Lon
        var locations = [('[' + siteName
              + ',' + Lat
              + ',' + Lon + ']')];
    });

  function initialize() {

    var myOptions = {
      center: new google.maps.LatLng(53.3242381,-6.3857877),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    setMarkers(map,locations)

  }



  function setMarkers(map,locations){

      var marker, i

for (i = 0; i < locations.length; i++)
 {  

 var loan = locations[i][0]
 var lat = locations[i][1]
 var long = locations[i][2]

  latlngset = new google.maps.LatLng(lat, long);

  var marker = new google.maps.Marker({  
          map: map, title: loan , position: latlngset  
        });
        map.setCenter(marker.getPosition())


        var content = "Site: " + loan +  '</h3>'    

  var infowindow = new google.maps.InfoWindow()

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
        return function() {
           infowindow.setContent(content);
           infowindow.open(map,marker);
        };
    })(marker,content,infowindow)); 

  }
  }

var table=$（“table tbody”）；
表.find（'tr'）。每个函数（i）{
var$tds=$（this.find（'td'），
siteName=$tds.eq（0.text（），
Lat=$tds.eq（1.text（）；
Lon=$tds.eq（2.text（）；
//对站点名称、时间戳、Lat和Lon进行处理
变量位置=[（'['+siteName
+“，”+Lat
+“，”+Lon+']'）；
});
函数初始化（）{
变量myOptions={
中心：新google.maps.LatLng（53.3242381，-6.3857877），
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“默认”），
肌肽）；
设置标记（地图、位置）
}
功能设置标记（地图、位置）{
变量标记
对于（i=0；i



你就快到了，我已经清理了一点过程，但这会让它工作-你的表在同一个位置也有3个标记，所以你可能想改变它
var table = $("table tbody");

function attainLocation() {
    var tableLocs = [];
    table.find('tr').each(function(i) {
        var $tds = $(this).find('td'),
            siteName = $tds.eq(0).text(),
            Lat = $tds.eq(1).text();
        Lon = $tds.eq(2).text();
        var obj = {
            'sitename': siteName,
            'lat': Lat,
            'lon': Lon
        };
        tableLocs.push(obj);
    });
    return tableLocs;
}
google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {

    var myOptions = {
        center: new google.maps.LatLng(53.3242381, -6.3857877),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    var locations = attainLocation();
    setMarkers(map, locations)

}

function setMarkers(map, locations) {

    var marker, i

    for (i = 0; i < locations.length; i++) {

        var loan = locations[i].sitename
        var lat = locations[i].lat
        var long = locations[i].lon

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({
            map: map,
            title: loan,
            position: latlngset
        });
        map.setCenter(marker.getPosition())


        var content = "Site: " + loan + '</h3>'

        var infowindow = new google.maps.InfoWindow()

        google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
            return function() {
                infowindow.setContent(content);
                infowindow.open(map, marker);
            };
        })(marker, content, infowindow));

    }
}

var table=$（“table tbody”）；
函数位置（）{
var tableLocs=[]；
表.find（'tr'）。每个函数（i）{
var$tds=$（this.find（'td'），
siteName=$tds.eq（0.text（），
Lat=$tds.eq（1.text（）；
Lon=$tds.eq（2.text（）；
var obj={
“sitename”：sitename，
“lat”：lat，
“lon”：lon
};
表位推送（obj）；
});
返回表；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
函数初始化（）{
变量myOptions={
中心：新google.maps.LatLng（53.3242381，-6.3857877），
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“默认”），
肌肽）；
变量位置=位置（）；
设置标记（地图、位置）
}
功能设置标记（地图、位置）{
变量标记
对于（i=0；i
您是否不知道您的内容应该在标签中？如果不是，我建议在做DOM操作之前先学习基本的HTML。。。有很多错误，比如变量的范围（var locations），这些都是非常基本的……您使用的工具肯定是MooTools吗？@T J是的，我知道，这里的html代码只是示例/JSfiddle
var table = $("table tbody");

function attainLocation() {
    var tableLocs = [];
    table.find('tr').each(function(i) {
        var $tds = $(this).find('td'),
            siteName = $tds.eq(0).text(),
            Lat = $tds.eq(1).text();
        Lon = $tds.eq(2).text();
        var obj = {
            'sitename': siteName,
            'lat': Lat,
            'lon': Lon
        };
        tableLocs.push(obj);
    });
    return tableLocs;
}
google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {

    var myOptions = {
        center: new google.maps.LatLng(53.3242381, -6.3857877),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    var locations = attainLocation();
    setMarkers(map, locations)

}

function setMarkers(map, locations) {

    var marker, i

    for (i = 0; i < locations.length; i++) {

        var loan = locations[i].sitename
        var lat = locations[i].lat
        var long = locations[i].lon

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({
            map: map,
            title: loan,
            position: latlngset
        });
        map.setCenter(marker.getPosition())


        var content = "Site: " + loan + '</h3>'

        var infowindow = new google.maps.InfoWindow()

        google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
            return function() {
                infowindow.setContent(content);
                infowindow.open(map, marker);
            };
        })(marker, content, infowindow));

    }
}