Afficher plusieurs marqueurs sur une carte avec leurs propres fenêtres d’information
Je dois afficher plusieurs marqueurs sur une carte, chacun avec sa propre infowindow. J’ai créé les marqueurs individuels sans problème, mais je ne sais pas comment créer les infowindows pour chacun.
Je génère une carte à l’aide de l’API V3 au sein d’un site Web basé sur ASP, avec des marqueurs créés à partir d’un ensemble d’enregistrements de firebase database. Les marqueurs sont créés en parcourant un RS et en définissant un marqueur () avec les variables pertinentes:
var myLatlng = new google.maps.LatLng(lat,long); var marker = new google.maps.Marker({ map: map, position: myLatlng, title: 'locationname', icon: 'http://google-maps-icons.googlecode.com/files/park.png' }); Cela crée tous les marqueurs pertinents dans leurs emplacements corrects.
Ce que je dois faire maintenant, et je ne suis pas sûr de la manière de procéder, est de leur donner leur propre infowindow, que je peux utiliser pour afficher des informations et des liens pertinents pour ce marqueur.
- Obtenir une variable ASP classique à partir de JSON posté
- Comment compresser JSON avec ASP?
- Efficacité de la bande passante d’interrogation sur le chat Ajax
- Mise à jour de div avec la réponse jQuery ajax html
La source
$(document).ready(function() { //Google Maps var myOptions = { zoom: 5, center: new google.maps.LatLng(-26.66, 122.25), mapTypeControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP, navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL } } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); <% While ((Repeat1__numRows 0) AND (NOT locations_haslatlong.EOF)) %> var myLatlng = new google.maps.LatLng(,); var marker = new google.maps.Marker({ map: map, position: myLatlng, title: '', icon: 'http://google-maps-icons.googlecode.com/files/park.png', clickable: true, }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); google.maps.event.addListener(marker, 'dblclick', function() { map.setZoom(14); }); });
Le problème est dans votre appel à addListener()
Pendant que vous parcourez votre jeu d’enregistrements et écrivez le code javascript à plusieurs resockets pour append un marqueur à la carte, vous n’appelez qu’une seule fois l’écouteur d’événements. En outre, vous ne créez jamais d’objects du type InfoWindow , vous n’avez donc rien pour appeler open() .
La solution rapide et sale consiste à append ceci après avoir créé votre marker mais avant de terminer votre boucle While .
var infowindow = new google.maps.InfoWindow({ content: '<%=(locations_haslatlong.Fields.Item("field_or_fields_containing_data_for_info_window").Value)%>' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); });
Mais ne faites pas cela – vous utilisez VB pour écrire du code javascript totalement redondant, alors que vous pourriez utiliser VB pour chercher ce dont vous avez besoin, puis laissez Javascript effectuer le travail que vous avez besoin avec les données.
La meilleure façon de faire ce que vous essayez de faire est de réécrire votre VB pour créer un tableau d’objects Javascript, chacun contenant les informations d’un parc. Utilisez ensuite le langage Javascript pour parcourir ce tableau et configurer pour vous les marqueurs et leurs info-fenêtres associées.
Décrivant la solution proposée:
// Create an array to hold a series of generic objects // Each one will represent an individual marker, and contain all the // information we need for that marker. This way, we can reuse the data // on the client-side in other scripts as well. var locations_array = [<% While ( (Repeat1__numRows <> 0) AND (NOT locations_haslatlong.EOF) ) %> { latitude: <%=(locations_haslatlong.Fields.Item("llat").Value)%>, longitude: <%=(locations_haslatlong.Fields.Item("llong").Value)%>, title: "<%=(locations_haslatlong.Fields.Item("ldescription").Value)%>", infoWindowContent: "<%=(locations_haslatlong.Fields.Item("field_or_fields_containing_data_for_info_window").Value)%>" }, <% Repeat1__index=Repeat1__index+1 Repeat1__numRows=Repeat1__numRows-1 locations_haslatlong.MoveNext() Wend %>]; var x = locations_array.length; while (--x) { // Grab an individual park object out of our array var _park = locations_array[x] var myLatlng = new google.maps.LatLng(_park.latitude,_park.longitude); var marker = new google.maps.Marker({ map: map, position: myLatlng, title: _park.title, icon: 'http://google-maps-icons.googlecode.com/files/park.png', clickable: true, }); var infowindow = new google.maps.InfoWindow({ content: _park.infoWindowContent }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); }
Voici quelque chose qui fonctionne (RoR / Rails / Ruby on Rails):
Il y avait un problème dans le code VB / ... auquel il a été répondu précédemment, l'object infowindow doit être unique par marqueur cliquable. Démo sur: http://www.geodepollution.org/
Voici une excellente solution.
http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
Cela semble plutôt bien.