Lecture à partir d'une base de données de localisations

Question

J'ai ce scénario, quelqu'un peut-il combler les lacunes pour moi? C'est comme ça:

Champs de la table de la base de données:

Map_ID, Coordinates, MarkerTitle, MarkerField.

Code Derrière:

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

Pour le moment, j'attribue une valeur à la fois pour pouvoir afficher un googleMap dans ma page, simplement en ayant des variables ami et en codebehind qui obtient leurs valeurs sur PageLoad et j'ai déclaré des variables portant le même nom dans mon script. qui montre les cartes, c'est comme:

Code Derrière:

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

Script:

<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>

Comment puis-je passer de la procédure ci-dessus à quelque chose comme: passer un tableau entier en JavaScript ou lire ces données (en récupérant les informations de la base de données depuis le côté JavaScript), puis en effectuant une nouvelle itération:

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

Je sais que c'est trop demander, alors l'aide sera grandement appréciée ...

Answer 1

Je vais utiliser jQuery pour simplifier les choses, j'espère que ça va aller ...

Effectuez les recherches dans la base de données côté serveur et émettez des données dans le code HTML. Vous devriez chercher à produire quelque chose comme ceci:

<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>

Si vous utilisez quelque chose comme ASP.NET, vous pouvez utiliser un asp: Repeater.

Une fois que les données sont restituées dans votre code HTML, vous pouvez les interroger et les parcourir:

$('#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);

});