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

Cibiņš · July 12, 2011

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 July 12, 2011 by Cibiņš

daGrevis · July 12, 2011

Par aliņiem nekas netika minēts... un Tu vēl domā: 'Ko tik maza atsaucība'...

codez · July 12, 2011

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);
       });     
   });
});

Cibiņš · July 12, 2011

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 July 12, 2011 by Cibiņš

codez · July 12, 2011

nav jquery bibliotēka inklūdota, kuru izmanto šeit:

$('#map').get(0)

var protam to vietu aistāt ar document.getElementById...

Cibiņš · July 12, 2011

nav jquery bibliotēka inklūdota, kuru izmanto šeit:
$('#map').get(0)
var protam to vietu aistāt ar document.getElementById...

Aa super, paldies! Tieši tas ko man vaidzēja!!! :)):)):))

Cibiņš · July 13, 2011

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 July 13, 2011 by Cibiņš

codez · July 13, 2011

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

Edited July 13, 2011 by codez

Cibiņš · July 13, 2011

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 July 13, 2011 by Cibiņš

codez · July 13, 2011

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.

codez · July 13, 2011

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>

Cibiņš · July 13, 2011

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 July 13, 2011 by Cibiņš

Sign In

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

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation