Google Maps: Localisateur de magasins

Je suis sur le point de commencer à concevoir un localisateur de magasins pour une entreprise. J'ai eu quelques questions sur la meilleure route à prendre. Les questions principales se trouvent au gras.Google Maps: Localisateur de magasins

Il y aura deux colonnes, 1 avec la carte elle-même et 1 avec la liste de tous les magasins actuellement situés dans la vue de la carte. J'espère que la carte google sera chargée zoomée sur une carte des États-Unis avec des polygones autour des états qui ont des magasins en eux. Les polygones ne doivent être chargés de façon dynamique, ils peuvent être modifiés manuellement à partir de cette liste: Geo Boundaries

Y at-il une fonction ou la méthode que vous recommanderiez-je utiliser cela dynamiquement comprendre quelles informations marqueur/magasin pour afficher en la 2ème colonne simplement en voyant quels marqueurs sont actuellement en vue? Par exemple, disons que la carte USA est chargée, 2 états ont des polygones (Michigan et Floria). Chaque concessionnaire michigan et florida est situé sur le côté droit. Si la personne clique sur le polygone du Michigan, alors la carte est agrandie sur tous les marqueurs situés dans le Michigan, et la colonne est mise à jour avec seulement des marqueurs michigan. Si le client a encore zoomé sur le sud du Michigan, seuls les marqueurs encore visibles sont affichés sur la colonne.

Ma deuxième question, c'est que les magasins auront certaines "propriétés" pour eux que je souhaite avoir une sorte de système de filtrage pour la carte. Disons que les magasins pourraient être catégorisés s'ils parlaient espagnol, ou s'ils étaient dans un centre de réparation. Si la coche est cochée pour "parler uniquement les magasins espagnols" alors tous les magasins qui ne parlent pas l'espagnol seraient déchargés (ou rafraîchir avec seulement les magasins parlant espagnol). Très similaire au site de sprint: Sprints Store Locator (cependant, je suis à la recherche d'une solution AJAX) Edit: mieux encore le matériel ace: AceHardware LocatorY at-il une méthode intégrée qui a cette fonctionnalité de correspondance des marqueurs de filtrage, ou que proposeriez-vous comme un moyen de le faire?

S'il vous plaît noter: Je voudrais éviter l'utilisation de toute base de données simplement parce qu'il n'y a pas besoin d'une base de données partout ailleurs sur ce site et il semble inutile d'exécuter simplement MySQL pour cette fonctionnalité. Je préférerais éviter de stocker longtemps. lat. dans un fichier, mais je peux le faire si nécessaire. Les magasins ne changeront pas souvent et je n'ai pas besoin d'utiliser GeoLocating pour obtenir Lat. Longue. via des adresses. Jquery sera chargé par défaut, donc je me demande si l'utilisation de ce plugin: http://googlemaps.mayzes.org/ serait recommandée ou non. Je crois comprendre qu'il utilise google maps v2 et que la v3 est beaucoup plus avancée et plus facile à gérer. Tous les exemples/liens de sites qui ont une ou toutes les fonctionnalités que je cherche seraient utiles.

Source

2010-10-12 ParoX

Voici une solution pour filtrer les magasins par état. Vous devrez implémenter la langue ou d'autres options de filtrage, mais la structure générale est là. L'idée de base est que vous conservez toutes les données de votre magasin dans un tableau et que vous définissez simplement la correspondance des marqueurs sur null s'ils ne répondent pas aux critères de filtrage. J'ai utilisé la correspondance de texte pour le nom d'état - si vous voulez être vraiment fantaisie, vous pouvez implémenter une vérification si un clic se produisait dans les limites de polygones à la place. J'ai utilisé jQuery pour charger et traiter les données xml d'état (ainsi que pour afficher la liste de magasins), vous devrez donc vous assurer que vous avez des données stockées sur le même serveur que votre script.

<html> 
<head> 
    <script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false"> 
    </script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> 
    </script> 
    <script> 
     var map; 
     var stores; 
     var options = { 
      currState: "" 
     } 

     //sample stores data - marker Obj will store reference to marker object on the map for that store 
     stores = [{ 
      "name": "store1", 
      "lat": "37.9069", 
      "lng": "-122.0792", 
      "state": "California", 
      "languages": ["Spanish", "English"], 
      "markerObj": "" 
     }, { 
      "name": "store2", 
      "lat": "37.7703", 
      "lng": "-122.4212", 
      "state": "California", 
      "languages": ["English"], 
      "markerObj": "" 
     }, { 
      "name": "store3", 
      "lat": "39.251", 
      "lng": "-105.0051", 
      "state": "Colorado", 
      "markerObj": "" 
     }] 



     function init(){ 
      var latlng = new google.maps.LatLng(37.9069, -122.0792); 
      var myOptions = { 
       zoom: 4, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map"), myOptions); 
      showStates(); 
      showStores(); 
     } 


     function showStates(){ 
      //load the XML for state boundaries and attach events 
      $.get("states.xml", function(data){ 

       $(data).find("state").each(function(){ 

        coord = []; 
        state = $(this).attr("name"); 

        stateCol = $(this).attr("colour"); 
        $(this).find("point").each(function(){ 
         lat = $(this).attr("lat") 
         lng = $(this).attr("lng") 

         coord.push(new google.maps.LatLng(lat, lng)); 
        }) 

        //draw state poly 
        statePoly = new google.maps.Polygon({ 
         paths: coord, 
         strokeColor: "#000000", 
         strokeOpacity: 0.8, 
         strokeWeight: 1, 
         fillColor: stateCol, 
         fillOpacity: 0.5 
        }); 

        statePoly.setMap(map); 
        //attach click events to a poly 
        addListeners(state, statePoly, coord); 


        //attach click events to poly 
       }) 
      }) 

     } 

     function addListeners(state, poly, coord){ 
      google.maps.event.addListener(poly, 'click', function(){ 

       //zoom in to state level 
       bounds = new google.maps.LatLngBounds(); 

       for (i = 0; i < coord.length; i++) { 
        bounds.extend(coord[i]) 


       } 
       map.fitBounds(bounds); 
       //do store display and filtering 
       filterStoresByState(state); 
      }); 
     } 

     function showStores(){ 
      for (i = 0; i < stores.length; i++) { 
       var myLatlng = new google.maps.LatLng(stores[i].lat, stores[i].lng); 
       marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map 



       }); 
       //store the marker object for later use 
       stores[i].markerObj = marker; 
       //generate a list of stores 
       $(".stores").append("<li>" + stores[i].name + "-" + stores[i].state + "</li>") 
      } 
     } 

     //do the filtering - you will need to expand this if you want add additional filtering options 

     function filterStoresByState(state){ 

      $(".stores").html(""); 
      for (i = 0; i < stores.length; i++) { 
       if (stores[i].state != state) { 
        (stores[i].markerObj).setMap(null); 

       } 
       else { 

        (stores[i].markerObj).setMap(map) 
        $(".stores").append("<li>" + stores[i].name + "-" + stores[i].state + "</li>") 
       } 
      } 






     } 
    </script> 
</head> 
<body onload="init()"> 
    <div id="map" style="width: 600px;height: 400px;"> 
    </div> 
    <div> 
     <ul class="stores"> 
     </ul> 
    </div> 
</body>

Source

2010-10-13 22:52:16 Michal

Répondre

Questions connexes