从地点数据库中读取

时间:2009-03-04 09:06:03

标签: javascript google-maps dataset

我有这种情况,任何人都可以为我填补空白吗?它是这样的:

数据库表地图的字段:

Map_ID,Coordinates,MarkerTitle,MarkerField。

代码背后:

Dim myTableAdapter As New myDatasetTableAdapters.tblMapsTableAdapters
Dim myTable As myDataset.tblMapsDataTable = myTableAdapter.GetAllMaps()

现在,我一次分配一个值,以便能够在我的页面中显示一个googleMap,只需拥有Friend Variables并在codebehind中获取其在PageLoad上的值,并在我的脚本中声明了具有相同名称的变量它显示了地图,如:

代码背后:

Friend coordinates As String
Friend zoom As String
Friend maptitle As String
Friend text As String

脚本:

<script type="text/javascript">
  function load() {
    var map = new GMap2(document.getElementById("map"));
    var marker1 = new GMarker(new GLatLng(<%=coordinates%>));
    var html1="<%=maptitle%><br/>" + "<%=text%>";
    map.setCenter(new GLatLng(<%=coordinates%>), 5);
    map.setMapType(G_HYBRID_MAP);
    map.addOverlay(marker1);

    map.addControl(new GLargeMapControl());
    map.addControl(new GScaleControl());
    map.addControl(new GMapTypeControl());
    marker.openInfoWindowHtml(html1);
  }
</script>

如何从上面的过程转到:将整个tableOfMaps传递给JavaScript或读取它们的数据(从JavaScript端检索数据库信息),然后像这样迭代:

For Each map In MapsTable
{
var marker1 = new GMarker(new GLatLng(<%=coordinates%>));
var html1="<%=maptitle%><br/>" + "<%=text%>";
map.addOverlay(marker1);
marker.openInfoWindowHtml(html1);
}

我知道这个问题太多了,所以非常感谢帮助...

1 个答案:

答案 0 :(得分:1)

我将使用jQuery来简化事情,希望没问题......

在服务器端执行数据库查找,并将数据发送到HTML中。你应该想要产生这样的东西:

<div id="maps-table">
  <div class="map-entry">
    <span class="map-title">Title 1</span>
    <span class="map-text">Text 1</span>
    <span class="map-coordinates">Coordinates 1</span>
  </div>
  <div class="map-entry">
    <span class="map-title">Title 2</span>
    <span class="map-text">Text 2</span>
    <span class="map-coordinates">Coordinates 2</span>
  </div>
  ...
</div>

如果您使用的是ASP.NET,则可以使用asp:Repeater。

在HTML中呈现数据后,您可以查询并迭代它:

$('#maps-table .map-entry').each(function() {

  var title = $(this).find('.map-title').text();
  var text = $(this).find('.map-text').text();
  var coordinates = $(this).find('.map-coordinates').text();

  // Add map markers here, eg:

  var marker = new GMarker(new GLatLng(coordinates));
  var html = title + "<br/>" + text;

  map.addOverlay(marker);
  marker.openInfoWindowHtml(html);

});