2012-06-22 2 views
0

Je travaille actuellement sur une application où divers marqueurs sont placés avec infowindows sur une carte Google basée sur les messages d'un utilisateur. J'ai également inclus le géocodage afin que l'utilisateur puisse changer leur emplacement et voir les marqueurs/poteaux dans n'importe quelle zone. Ce que je voudrais faire, c'est que l'utilisateur fasse une recherche à travers les informations textuelles dans les infowindows via un formulaire et la carte répond ensuite en montrant les marqueurs qui contiennent cette fenêtre de texte. J'ai parcouru l'API et je ne vois pas cette capacité mentionnée, bien qu'il semble que ce soit réalisable.API Google Map: Recherche dans le texte dans infowindow possible?

Toute idée ou information sur la façon d'accomplir ceci serait très appréciée.

Voici le code actuel dans l'application:

function mainGeo() 
{ 
    if (navigator.geolocation) 
     { 
      navigator.geolocation.getCurrentPosition(mainMap, error, {maximumAge: 30000, timeout: 10000, enableHighAccuracy: true}); 
    } 
    else 
    { 
      alert("Sorry, but it looks like your browser does not support geolocation."); 
    } 
} 


var stories = {{storyJson|safe}}; 
var geocoder; 
var map; 


function loadMarkers(stories){ 
    for (i=0;i<stories.length;i++) { 
     var story = stories[i]; 

     (function(story) { 
      var pinColor = "69f2ff"; 
       var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=S|" + pinColor, 
        new google.maps.Size(21, 34), 
        new google.maps.Point(0,0), 
        new google.maps.Point(10, 34)); 
      var point = new google.maps.LatLng(story.latitude, story.longitude); 
      var marker = new google.maps.Marker({position: point, map: map, icon: pinImage}); 
      var infowindow = new google.maps.InfoWindow({ 
      content: '<div >'+ 
       '<div >'+ 
       '</div>'+ 
       '<h2 class="firstHeading">'+story.headline+'</h2>'+ 
       '<div>'+ 
       '<p>'+story.author+'</p>'+ 
       '<p>'+story.city+'</p>'+ 
       '<p>'+story.topic+'</p>'+ 
       '<p>'+story.date+'</p>'+ 
       '<p>'+story.copy+'</p>'+ 
       '<p><a href='+story.url+'>Click to read story</a></p>'+ 
       '</div>'+ 
       '</div>' 

      }); 
      google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map,this); 
      }); 
     })(story); 
    } 
} 



function mainMap(position) 
{ 
     geocoder = new google.maps.Geocoder(); 
     // Define the coordinates as a Google Maps LatLng Object 
     var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 


     // Prepare the map options 
     var mapOptions = 
     { 
        zoom: 15, 
        center: coords, 
        mapTypeControl: false, 
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     // Create the map, and place it in the map_canvas div 
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

     // Place the initial marker 
     var marker = new google.maps.Marker({ 
        position: coords, 
        map: map, 
        title: "Your current location!" 
     }); 

     loadMarkers(stories); 

    } 


    function codeAddress() { 
    var address = document.getElementById("address").value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 


function error() { 
    alert("You have refused to display your location. You will not be able to submit stories."); 
    } 

mainGeo(); 

Répondre

0
  1. Créer trois tableaux vides (par exemple, markers, infowindows et matches)
  2. Comme vous instancier le marqueur, la référence marqueur via un index dans le tableau markers (par exemple, markers[i] = marker)
  3. Lorsque vous instanciez l'infowindow, référence son contenu via un index dans le tableau infowindows (Par exemple, infowindows[i] = htmltext [ou tout autre nom de la variable que vous stockez votre contenu)
  4. Recherchez la chaîne dans le tableau infowindows, stocker les index des éléments qui contiennent la chaîne dans le tableau matches, puis utiliser une boucle avec le matches tableau pour ajouter les marqueurs du tableau markers (en fonction des valeurs d'index du tableau matches).
+0

Merci. Vous ne savez pas exactement où placer cela dans le code actuel. –

Questions connexes