Jump to content
php.lv forumi

Maršrutu veidošana Google maps, kas integrēta lapā


Cibiņš

Recommended Posts

setVisible(false); un tavs markers no kartes pazūd. tā arī visa dzēšana.

 

:@ Man vajag vienu nodzēst nevis visus :D Attiecīgi piemēram ja es atzīmēju ar klikšķiem 10x uz kartes dažādās vietās, tad izveidojās 10 marķieri, savukārt ja es uzklikšķinu uz kādu no marķieriem tad attiecīgi tas, uz kura es uzklikšķinu - pazūd. Bet man pazūd visi! :@ :D

 

Kāds var uzrakstīt lūzu jēdzīgu koda gabalu dzēšanas f-jai?? Aliņi garantēti :D

Edited by Cibiņš
Link to comment
Share on other sites

Izveidoju vienkāršu piemēru no kura vajadzētu saprast, kas jādara.

Uzspiežot uz kartes marķieris parādas, uzspiešot uz marķiera, tas tiek izdzēsts.

http://jsfiddle.net/w3kFV/

 

js:

$(function(){
   var map = new google.maps.Map($('#map').get(0),{
     zoom: 12,
     center: new google.maps.LatLng(40, -122),
     mapTypeId: google.maps.MapTypeId.TERRAIN        
   });
   //events marķiera izveidošanai
   google.maps.event.addListener(map, 'click', function(e) {
       var marker = new google.maps.Marker({
           position: e.latLng,
           map: map
       });
       //events marķiera dzēšanai
       google.maps.event.addListener(marker, 'click', function(e){
           marker.setMap(null);
       });     
   });
});

Link to comment
Share on other sites

Izskatās ideāli bet taga saliku visu kā vaig un vispār neiet!!!!!!!!!!!!!!!!!!! Ko es atkal daru nepareizi johaidī!!!!

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(function(){
   var map = new google.maps.Map($('#map').get(0),{
     zoom: 7,
     center: new google.maps.LatLng(56.878999, 24.455566),
     mapTypeId: google.maps.MapTypeId.HYBRID       
   });
   //events marķiera izveidošanai
   google.maps.event.addListener(map, 'click', function(e) {
       var marker = new google.maps.Marker({
           position: e.latLng,
           map: map,
           draggable: true,
           animation: google.maps.Animation.DROP
       });
       //events marķiera dzēšanai
       google.maps.event.addListener(marker, 'click', function(e){
           marker.setMap(null);
       });     
   });
});
</script>
</head>

<body>
<div id="map" style="width:400px; height:300px;"></div>
</body>
</html>

Edited by Cibiņš
Link to comment
Share on other sites

A taga interesē kā var izveidot maršrutu kā http://maps.google.com, kad piemēram noliek puļķi A uz kartes un puļķi B lai automātiski izveido maršrutu vai arī izveido maršrutu automātiski maršrutu caur vairākiem punktiem (piem apskates objektiem)...to gan njebumbum.

Edited by Cibiņš
Link to comment
Share on other sites

http://jsfiddle.net/w3kFV/3/

 

Bet principā šeit ir visi vajadzīgie piemēri, gan kā izveidot maršrut starp 2 punktiem, gan kā ietverot arī starpunktu:

http://code.google.com/apis/maps/documentation/javascript/services.html#Directions

 

Ideāli! LIELUMLIELS PALDIES!!! :)) Bet tagad visbeidzot grūtākais - datu sūtīšana uz MYSQL un extractēšana. Skatījos ka ir te tāda lieta kā http://www.drasticdata.nl kur tas jau ir, bet vienīgais - šeit nevar pievienot un nodzēst marķierus un dzēst vai pievienot tos datubāzēs. Neesmu augstā līmeņa profs, līdz ar to - nepārzinu šo google maps pusi. Kā šo panākt?

Edited by Cibiņš
Link to comment
Share on other sites

Kad pievieno marķieri, saglabā to javascript masīvā.

Kad vajag sūti ar ajax uz serveri, ejot cauri vaisam masīvam un ekstrahējot ārā koordinātes, kuras arī kā masīvu nosūti. To arī attiecīg saglabā mysql.

Kad vajag atjaunot, ielādē no mysql, ivzadi kā js masīvu un ciklā tāpat kā click evntā uzliec jaunus marķierus un ceļus.

Link to comment
Share on other sites

Nedaudz aizrāvos ar spēlēšanos ar google API un uztaisīju atsevišķu marķieru menidžeri, no kura ar getRoute funkciju var iegūt masīvu ar marķieru koordinātēm un ar setRoute ielikt masīvu atpakaļ menidžerī. Viss, kas atliek, ir uztaisīt, lai šo masīvu ar ajax nosūta serverim un saņem no servera.

 

http://jsfiddle.net/w3kFV/4/

 

js:

MM={
   markers:[],
   init:function(map){
       this.map=map;
       this.dirserv=new google.maps.DirectionsService();
       this.dir=new google.maps.DirectionsRenderer();
   },
   add:function(ll){
       var marker=new google.maps.Marker({position:ll,map:this.map});
       this.markers.push(marker);
       return marker;
   },
   remove:function(marker){
       for(var i in this.markers){
           if(this.markers[i]==marker){
               marker.setMap(null);
               this.markers.splice(i,1);
           }
       }
   },
   clear:function(){
       for(var i in this.markers){
           this.markers[i].setMap(null);
       }
       this.markers=[];
   },    
   refreshRoute:function(){
       var self=this;
       var m=this.markers;
       var l=m.length;
       if (l>1){
           var waypoints=[];
           for(var i=1;i<l-1;i++){
               waypoints.push({
                   location:m[i].position,
                   stopover:true
               });
           }

           var request = {
               origin:m[0].position,
               destination:m[l-1].position,
               waypoints: waypoints,
               optimizeWaypoints: true,
               travelMode: google.maps.TravelMode.DRIVING
           };
           this.dirserv.route(request, function(result, status) {
               if (status == google.maps.DirectionsStatus.OK) {
                   self.dir.setDirections(result);
                   self.dir.setMap(self.map);
               }
           });
       } else {
           this.dir.setMap(null);
       }

   },
   getRoute:function(){
       var resp=[];
       for(var i in this.markers){
           var pos=this.markers[i].position;
           resp.push([pos.lat(),pos.lng()]);
       }
       return resp;
   },
   setRoute:function(route){
       this.clear();
       for(var i in route){
           this.add(new google.maps.LatLng(route[i][0],route[i][1]));
       }
   }
}

$(function(){
   var map = new google.maps.Map($('#map').get(0),{
     zoom: 12,
     center: new google.maps.LatLng(56.94, 24.12),
     mapTypeId: google.maps.MapTypeId.TERRAIN        
   });

   MM.init(map);


   //events marķiera izveidošanai
   google.maps.event.addListener(map, 'click', function(e) {
       var marker=MM.add(e.latLng);

       //atjaunojam ceļus pēc jauna marķiera pievienošanas
       MM.refreshRoute();

       //events marķiera dzēšanai
       google.maps.event.addListener(marker, 'click', function(e){
           MM.remove(marker);
           MM.refreshRoute();
       });     
   });

   $('#clear').click(function(){
       MM.clear();
       MM.refreshRoute();
   });
   $('#save').click(function(){
       alert(MM.getRoute());
   });
   $('#load').click(function(){
       MM.setRoute([[56.96,24.125],[56.945,24.073],[56.91,24.118],[56.95,24.187]]);
       MM.refreshRoute();
   });    

});

 

html:

 <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
<button id="clear">Clear</button>
<button id="save">Save</button>
<button id="load">Load</button>

Link to comment
Share on other sites

Hehe, nekas slikts jau nav ka aizraujās, ja pamatus zin tad jau ar tādām lietām jau var padarīties un nākošreiz arī pašam noderēs. Domāju ka arī citiem noderēs no šīs tēmas šādas lietas. LIELAIS PALDIES TEV!!!

 

Tik vēl pāris sīkumi-kur īsti jāliek šie-lai marķierus var pārvietot un lai ir ar animāciju? Izmēģināju pie šejienes

 

$(function(){
   var map = new google.maps.Map($('#map').get(0),{
     zoom: 12,
     center: new google.maps.LatLng(56.94, 24.12),
     mapTypeId: google.maps.MapTypeId.TERRAIN,

   }); 

 

šo

 

  draggable: true,
  animation: google.maps.Animation.DROP

 

bet tas negrib strādāt. Ja ieliku iepriekšējā kodā ko devi tas strādāja.

 

Un interesē arī automātiskais maršruta no viena punkta līdz otram un kopējais maršruta garums..

Edited by Cibiņš
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...