Question

我正在尝试在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>

CSS

html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
  table { border: 1px solid black;}
  th { border: 1px solid black;}
  td { border: 1px solid black;}

使用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)); 

  }
  }

http://jsfiddle.net/2crQ7/894/

Answer 1

jsFiddle Demo

你几乎就在那里，我已经清理了一点这个过程，但这会让它运转起来 - 你的桌面也有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));

    }
}

使用Javascript

1 个答案: