DevProTalk

Forumi IT profesionalaca
web development, web design, e-business, SEO


Idite nazad   DevProTalk > Web development i web aplikacije > (X)HTML, JavaScript, DHTML, XML, CSS
Želite da se reklamirate ekskluzivno na ovoj poziciji? Javite se

(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi

Odgovori
 
Alati teme Način prikaza
Staro 17. 10. 2013.   #1
mslavko
profesionalac
Professional
 
Avatar mslavko
 
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
mslavko is on a distinguished road
Default Iscrtavanje SVG na gMapi

Unapred se izvinjavam sto sam ovo pitanje vec postavio samo sa drugim kodom, ali zelim da bolje objasnim situaciju i postavim bolje pitanje


Pronasao kod-algoritam koji moze da iscrta polygon oko linije. U mom slucaju linija mora da bude google driving direction. Kod koji pravi offset poligon na osnovu linije: http://jsbin.com/oVIcowo/1/edit

Ovde kao sto vidite pravi se poligon na osnovu niza tacaka:

Kôd:
Kôd:
function draw() {
  var polygons = [[{"X":72,"Y":59.45},{"X":136,"Y":66},{"X":170,"Y":99},{"X":171,"Y":114},{"X":183,"Y":125},{"X":218,"Y":144},{"X":218,"Y":165},{"X":226,"Y":193},{"X":254,"Y":195},{"X":283,"Y":195},{"X":292,"Y":202},{"X":325,"Y":213},{"X":341,"Y":234},{"X":397,"Y":245},{"X":417,"Y":248}]]; 
  var scale = 100;
  reverse_copy(polygons);
  polygons = scaleup(polygons, scale);
  var cpr = new ClipperLib.Clipper();
  var delta = 25;
  var joinType = ClipperLib.JoinType.jtRound;
  var miterLimit = 2;
  var AutoFix = true;
  var svg, offsetted_polygon,
  cont = document.getElementById('svgcontainer');
  offsetted_polygon = cpr.OffsetPolygons(polygons, delta * scale, joinType, miterLimit, AutoFix);
  //console.log(JSON.stringify(offsetted_polygon));
  
  // Draw red offset polygon
  svg = '<svg style="margin-top:10px;margin-right:10px;margin-bottom:10px;background-color:#dddddd" width="540" height="340">';
  svg += '<path stroke="red" fill="red" stroke-width="2" stroke-opacity="0.6" fill-opacity="0.2" d="' + polys2path(offsetted_polygon, scale) + '"/>';
  
  //Draw blue polyline
  svg += '<path stroke="blue" stroke-width="3" d="' + polys2path(polygons, scale) + '"/>';
  svg += '</svg>';
  
      cont.innerHTML += svg;
}
// helper function to scale up polygon coordinates
function scaleup(poly, scale) {
  var i, j;
  if (!scale) scale = 1;
  for(i = 0; i < poly.length; i++) {
    for(j = 0; j < poly[i].length; j++) {
      poly[i][j].X *= scale;
      poly[i][j].Y *= scale;
    }
  }
  return poly;
}

// converts polygons to SVG path string
function polys2path (poly, scale) {
  var path = "", i, j;
  if (!scale) scale = 1;
  for(i = 0; i < poly.length; i++) {
    for(j = 0; j < poly[i].length; j++){
      if (!j) path += "M";
      else path += "L";
      path += (poly[i][j].X / scale) + ", " + (poly[i][j].Y / scale);
    }
    path += "Z";
  }
  return path;
}

function reverse_copy(poly) {
	// Make reverse copy of polygons = convert polyline to a 'flat' polygon ...
  var k, klen = poly.length, len, j; 
  for (k = 0; k < klen; k++) {
    len = poly[k].length;
    poly[k].length = len * 2 - 2;
    for (j = 1; j <= len - 2; j++) {
      poly[k][len - 1 + j] = {
        X: poly[k][len - 1 - j].X,
        Y: poly[k][len - 1 - j].Y
      }
    }
  }
}
Ja sam u mom primeru jednostavno zameio varijablu polygon sa tackama na ruti koje dobijam od googla sa
Kôd:
response.routes[0].overview_path;
pa sam ondak napisao ovako:

Kôd:
Kôd:
directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
      
      function draw() {
  var polygons = response.routes[0].overview_path;
//OVDE SAM JEDNOSTAVNO DODAO OSTATAK KODA I PODESIO DA SE ISCRTAVA SVG NA ID MAP-CANVAS
a ostali deo koda dodao : http://jsbin.com/uTATePe/9/edit

Medjutim opet nemogu da iscrtam poligon oko rute iako u gore pomenutom primeru sve radi savrseno. Kako da primenim ovo na google mape? Kako da iscrtam polygon oko rute na ID MAP-CANVAS?

U konzoli nema gresaka.
mslavko je offline   Odgovorite uz citat
Staro 17. 10. 2013.   #2
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

Citat:
Originalno napisao mslavko Pogledajte poruku
Kôd:
directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
      
      function draw() {
  var polygons = response.routes[0].overview_path;
//OVDE SAM JEDNOSTAVNO DODAO OSTATAK KODA I PODESIO DA SE ISCRTAVA SVG NA ID MAP-CANVAS
a ostali deo koda dodao : http://jsbin.com/uTATePe/9/edit

Medjutim opet nemogu da iscrtam poligon oko rute iako u gore pomenutom primeru sve radi savrseno. Kako da primenim ovo na google mape? Kako da iscrtam polygon oko rute na ID MAP-CANVAS?

U konzoli nema gresaka.
Kod mene kada pokušam vraća grešku:
Kôd:
Uncaught ReferenceError: draw is not defined
https://developer.mozilla.org/en/doc...function_scope
http://ryanmorr.com/understanding-sc...in-javascript/



Citat:
Originalno napisao mslavko Pogledajte poruku
Ja sam u mom primeru jednostavno zameio varijablu polygon sa tackama na ruti koje dobijam od googla sa
Kôd:
response.routes[0].overview_path;
A šta vraća response.routes[0].overview_path, odnosno koji format, a koji format zahtevju ove funkcije/metode?


Ukoliko sam dobro razumeo ovu biblioteku, ona vraća koordinate poligona, pa zašto ne koristiš:
https://developers.google.com/maps/d...hapes#polygons
?

Imaš i npr. JSTS biblioteku, https://coderwall.com/p/zb_zdw
__________________
Don't look at me; I'm lost too.
“If you can't dazzle them with brilliance, baffle them with bul*s**t.”
Br@nkoR je offline   Odgovorite uz citat
Staro 17. 10. 2013.   #3
mslavko
profesionalac
Professional
 
Avatar mslavko
 
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
mslavko is on a distinguished road
Default re

Ovaj kod ovde: https://coderwall.com/p/zb_zdw radi to sto meni treba ali ne bas savrseno tj. ja sam isti takav kod napisao medjutim postoje odredjeni pravci, distance, gde ne radi bas najbolje pa sam resio da integrisem algoritam koji sam nasao jer je on perfektno resenje.

Takodje ovaj kod:
Kôd:
response.routes[0].overview_path;
vraca niz tacaka (lat,lng) sa kojim se konstruise driving direction tj linija izmedju dve tacke

Ovaj algoritam zahteva da se kao ulazni parametar postave ove tacke linija a kao izlazni se dobijaju tacke sa kojima se konstruise poligon.


Sve ovo samo moram da prikazem na mapi pa sam sada uradio ovako:

http://jsbin.com/uTATePe/21 - DEMO
KOD:
Kôd:
directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
      
      function draw() {
  var polygons = response.routes[0].overview_path; 
  var scale = 100;
  reverse_copy(polygons);
  polygons = scaleup(polygons, scale);
  var cpr = new ClipperLib.Clipper();
  var delta = 25;
  var joinType = ClipperLib.JoinType.jtRound;
  var miterLimit = 2;
  var AutoFix = true;
  var svg, offsetted_polygon,
  cont = document.getElementById('map-canvas');
  offsetted_polygon = cpr.OffsetPolygons(polygons, delta * scale, joinType, miterLimit, AutoFix);
  console.log(JSON.stringify(offsetted_polygon));
  svg = polys2path(offsetted_polygon, scale);

//Sada kada sam dobio tacke za poligon SVG pokusavam da nacrtam na mapi
         crtamPoligon= new google.maps.Polygon({
    paths: svg,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  crtamPoligon.setMap(map);
        
}
// helper function to scale up polygon coordinates
function scaleup(poly, scale) {
  var i, j;
  if (!scale) scale = 1;
  for(i = 0; i < poly.length; i++) {
    for(j = 0; j < poly[i].length; j++) {
      poly[i][j].X *= scale;
      poly[i][j].Y *= scale;
    }
  }
  return poly;
}

// converts polygons to SVG path string
function polys2path (poly, scale) {
  var path = "", i, j;
  if (!scale) scale = 1;
  for(i = 0; i < poly.length; i++) {
    for(j = 0; j < poly[i].length; j++){
      if (!j) path += "M";
      else path += "L";
      path += (poly[i][j].X / scale) + ", " + (poly[i][j].Y / scale);
    }
    path += "Z";
  }
  return path;
}

function reverse_copy(poly) {
	// Make reverse copy of polygons = convert polyline to a 'flat' polygon ...
  var k, klen = poly.length, len, j; 
  for (k = 0; k < klen; k++) {
    len = poly[k].length;
    poly[k].length = len * 2 - 2;
    for (j = 1; j <= len - 2; j++) {
      poly[k][len - 1 + j] = {
        X: poly[k][len - 1 - j].X,
        Y: poly[k][len - 1 - j].Y
      }
    }
  }
}
U konzoli u mom browseru (chrome) nema nikakvih gresaka, a opet ne radi

A tacke koje dobijam od google directions-a prikaz u konzoli izgleda ovako:
Citat:
console.log(tacke)
[N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N…]
[0 … 99]
0: N
lb: 41.87811000000001
mb: -87.62979000000001
__proto__: N
1: N
2: N
3: N
4: N
5: N
6: N
7: N
8: N
9: N
10: N
11: N
12: N
13: N
14: N
15: N
16: N
17: N
18: N
19: N
20: N
21: N
22: N
23: N
24: N
25: N
26: N
27: N
28: N
29: N
30: N
31: N
32: N
33: N
34: N
35: N
36: N
37: N
38: N
39: N
40: N
41: N
42: N
43: N
44: N
45: N
46: N
47: N
48: N
49: N
50: N
51: N
52: N
53: N
54: N
55: N
56: N
57: N
58: N
59: N
60: N
61: N
62: N
63: N
64: N
65: N
66: N
67: N
68: N
69: N
70: N
71: N
72: N
73: N
74: N
75: N
76: N
77: N
78: N
79: N
80: N
81: N
82: N
83: N
84: N
85: N
86: N
87: N
88: N
89: N
90: N
91: N
92: N
93: N
94: N
95: N
96: N
97: N
98: N
99: N
[100 … 199]
[200 … 208]
length: 209
__proto__: Array[0]

Hvala na savetima

Poslednja izmena od mslavko : 17. 10. 2013. u 17:35.
mslavko je offline   Odgovorite uz citat
Staro 18. 10. 2013.   #4
mslavko
profesionalac
Professional
 
Avatar mslavko
 
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
mslavko is on a distinguished road
Default kod

Probao sam i ovako (objasnjenje stoji u kodu):

Kôd:
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
      var poligon;
      var tacke;
      var primer;
      var rezultat;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
      //tacke = response.routes[0].overview_path;
      //primer = [[{"X":72,"Y":59.45},{"X":136,"Y":66},{"X":170,"Y":99},{"X":171,"Y":114},{"X":183,"Y":125},{"X":218,"Y":144},{"X":218,"Y":165},{"X":226,"Y":193},{"X":254,"Y":195},{"X":283,"Y":195},{"X":292,"Y":202},{"X":325,"Y":213},{"X":341,"Y":234},{"X":397,"Y":245},{"X":417,"Y":248}]]; 
      //ovde transformisem tacke iz directons-a u format citljiv JSclliper biblioteci
      var overviewPath = response.routes[0].overview_path,
    overviewPathGeo = [];
for(var i = 0; i < overviewPath.length; i++) {
    overviewPathGeo.push(
        [overviewPath[i].lng(), overviewPath[i].lat()]
    );
}
      //kreiram varijablu koja ce vratiti tacke za crtanje poligona
      var svg=draw(overviewPathGeo);
      //kod za crtanje poligona
    poligon = new google.maps.Polygon({
    paths: svg,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
      //crtam poligon
  poligon.setMap(map);

        
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
      //funcija sa argumentom u - ustavri su tacke koje daje directions servis
function draw(u) {
  var polygons = u; 
  var scale = 100;
  reverse_copy(polygons);
  polygons = scaleup(polygons, scale);
  var cpr = new ClipperLib.Clipper();
  var delta = 25;
  var joinType = ClipperLib.JoinType.jtRound;
  var miterLimit = 2;
  var AutoFix = true;
  var svg, offsetted_polygon,
  cont = document.getElementById('map-canvas');
  offsetted_polygon = cpr.OffsetPolygons(polygons, delta * scale, joinType, miterLimit, AutoFix);
  console.log(JSON.stringify(offsetted_polygon));
  
  svg = polys2path(offsetted_polygon, scale);
        rezultat = polys2path(offsetted_polygon, scale);
  return svg;

   
        
}
// helper function to scale up polygon coordinates
function scaleup(poly, scale) {
  var i, j;
  if (!scale) scale = 1;
  for(i = 0; i < poly.length; i++) {
    for(j = 0; j < poly[i].length; j++) {
      poly[i][j].X *= scale;
      poly[i][j].Y *= scale;
    }
  }
  return poly;
}

// converts polygons to SVG path string
function polys2path (poly, scale) {
  var path = "", i, j;
  if (!scale) scale = 1;
  for(i = 0; i < poly.length; i++) {
    for(j = 0; j < poly[i].length; j++){
      if (!j) path += "M";
      else path += "L";
      path += (poly[i][j].X / scale) + ", " + (poly[i][j].Y / scale);
    }
    path += "Z";
  }
  return path;
}

function reverse_copy(poly) {
	// Make reverse copy of polygons = convert polyline to a 'flat' polygon ...
  var k, klen = poly.length, len, j; 
  for (k = 0; k < klen; k++) {
    len = poly[k].length;
    poly[k].length = len * 2 - 2;
    for (j = 1; j <= len - 2; j++) {
      poly[k][len - 1 + j] = {
        X: poly[k][len - 1 - j].X,
        Y: poly[k][len - 1 - j].Y
      }
    }
  }
}

    </script>
CEO KOD I DEMO: http://jsbin.com/uTATePe/32/edit
mslavko je offline   Odgovorite uz citat
Staro 18. 10. 2013.   #5
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

Grešku koju sam napisao u prethodnoj poruci javljala se prilikom promene vrednosti prvog select menija, jer se na onchange događaj select elementa poziva funkcija draw, sada je kod izmenjen i javlja se druga greška.

Pitanje u vezi podataka koje prosleđuješ funkcijama sam postavio jer sam video problem, i dalje imaš taj problem, ti pomoću response.routes[0].overview_path dobijaš:
https://developers.google.com/maps/d...irectionsRoute
Citat:
An array of LatLngs representing the entire course of this route. The path is simplified in order to make it suitable in contexts where a small number of vertices is required (such as Static Maps API URLs).
dakle nešto kao:
Kôd:
[
  new google.maps.LatLng(12.34, 56.789),
  new google.maps.LatLng(87.65, 123.45)
]
a potrebno ti je:
Kôd:
[
  [
    {
      X: 12.34
      Y: 56.789
    },
    {
      X: 87.65,
      Y: 123.45
    }
  ]
]
a ti, u tvom kodu, prosleđuješ:
Kôd:
[
  [56.789, 12.34],
  [123.45, 87.65]
]
Zatim sledeći problem:
http://sourceforge.net/p/jsclipper/w...on-coordinates
Citat:
B3. Scale up polygon coordinates
Because Clipper library uses integer coordinates, we have to scale up coordinates to maintain precision. The scale value should be large enough, but for performance reasons not too high. If coordinates have a precision of 2 decimals, the sufficient scale coefficient is 100.
...

Zatim, pogledaj u dokumentaciji za kreiranje poligona, za PolygonOptions objekat paths osobinu:
https://developers.google.com/maps/d...PolygonOptions
Citat:
The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths. As a result, the paths property may specify one or more arrays of LatLng coordinates. Paths are closed automatically; do not repeat the first vertex of the path as the last vertex. Simple polygons may be defined using a single array of LatLngs. More complex polygons may specify an array of arrays. Any simple arrays are converted into MVCArrays. Inserting or removing LatLngs from the MVCArray will automatically update the polygon on the map.
A koju vrednost ti prosleđuješ, odnosno šta dobijaš od funkcije polys2path.


Citat:
Originalno napisao mslavko Pogledajte poruku
Ovaj kod ovde: https://coderwall.com/p/zb_zdw radi to sto meni treba ali ne bas savrseno tj. ja sam isti takav kod napisao medjutim postoje odredjeni pravci, distance, gde ne radi bas najbolje
Može li primer, ne koristim, ali me interesuje slučaj gde ne radi, hvala.
__________________
Don't look at me; I'm lost too.
“If you can't dazzle them with brilliance, baffle them with bul*s**t.”
Br@nkoR je offline   Odgovorite uz citat
Staro 18. 10. 2013.   #6
mslavko
profesionalac
Professional
 
Avatar mslavko
 
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
mslavko is on a distinguished road
Default

Branko hvala na odgovorima

a ovaj primer koji si ti dao jednostavno ne pravi dobr odstojanje kada se pravac prostire sever-jug, tj. taj prosor suzi a dok je u pravcu istok-zapad sve kako treba sto se i vidi sa slike


A ovde sam ja pokusao da napravim upravo to sto si mi pokazao i imao sam taj isti problem:


KOD:http://jsbin.com/uTATePe/6/edit

Citat:
B3. Scale up polygon coordinates
Because Clipper library uses integer coordinates, we have to scale up coordinates to maintain precision. The scale value should be large enough, but for performance reasons not too high. If coordinates have a precision of 2 decimals, the sufficient scale coefficient is 100.
...
Ovo moze da bude problem koji sam prevideo jer ja moram da koristim koordinate radi tacnosti iscrtavanja poligona uz rutu...

Takodje funcija polys2path bi trebalo da vraca tacke sa kojima moze da se kreira poligon a ulazni parametar su tacke linija tj. driving directions

Sad sam u totalnom zaplecku...
mslavko je offline   Odgovorite uz citat
Staro 18. 10. 2013.   #7
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

Citat:
Originalno napisao mslavko Pogledajte poruku
Ovo moze da bude problem koji sam prevideo jer ja moram da koristim koordinate radi tacnosti iscrtavanja poligona uz rutu...
Postavi samo neku veću vrednost za scale promenljivu npr. 10000 100000, radi veće preciznosti, prevideo sam da biblioteka ne radi zaokruživanje vrednosti pa sam mislio da drugačije treba uraditi.
__________________
Don't look at me; I'm lost too.
“If you can't dazzle them with brilliance, baffle them with bul*s**t.”
Br@nkoR je offline   Odgovorite uz citat
Staro 18. 10. 2013.   #8
mslavko
profesionalac
Professional
 
Avatar mslavko
 
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
mslavko is on a distinguished road
Default re

Malo sam vec dosadan ali moram ovo da resim na ovaj ili onaj nacin

Pokusao sam da pretvorim tacke koje dobijam od google directionsa u format koji odgovara biblioteci JSclipper pa sam tako napisao:

Kôd:
tacke = response.routes[0].overview_path;
      console.log(tacke);
newTacke = [[tacke.map(function(w) { return {X:w[1], Y:w[0]}; })]]; 
      console.log(newTacke);
Medjutim sa ovim kodom console.log(newTacke) kaze da su X i Y undefined, pa samim tim ovo moram nekako da sredim...

sa druge strane pokusao sam sa ovim kodom da nacrtam poligon jer sam funkciji draw() kao ulazni parametar dao var primer koji sadrzi cele brojeve
Kôd:
 primer = [[{"X":72,"Y":59.45},{"X":136,"Y":66},{"X":70,"Y":99},{"X":11,"Y":14},{"X":18,"Y":25}]];
i dobijam kao rezultat funcije:
Kôd:
console.log(draw(primer));
izlazne tacke koje su ustvari tacke poligona ali nemogu da ga nacrtam na mapi ovim kodom:

Kôd:
   var svg=draw(primer);
      //kod za crtanje poligona
    poligon = new google.maps.Polygon({
    paths: svg,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
      //crtam poligon
  poligon.setMap(map);
Opet je ovde verovatno problem celih brojeva koji nemogu da se prikazu na mapi tj. nisu brojevi u okviru koordinata...
Koliko sam shvatio dobijam koordinate od googla pa ih prilagodjavam biblioteci da moze da se izvrsi pa kad dobijem rezultat opet moram da priagodim google mapi da bi mogao da se iscrta poligon

Sa druge strane ovde imam pitanje u vezi requesta, koliko ce isctravanje poligona biti moguce na dnevnoj bazi ... koliki je limit?

Da li mogu sa google map_overlay da jednostavno postavim ovo podrucje kao SVG elemenat na mapi i time izbegnem koriscenje crtanje poligona uz pomoc google api-ja vec da koristim map_overlay?

Poslednja izmena od mslavko : 18. 10. 2013. u 20:03.
mslavko je offline   Odgovorite uz citat
Staro 18. 10. 2013.   #9
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

Nešto kao:
Kôd:
var tacke = response.routes[0].overview_path,
    newTacke = [[]];
for(var i = 0, len = overviewPath.length; i < len; i++) {
    newTacke[0].push({
       X: tacke[i].lat(),
       Y: tacke[i].lng()
    });
}

/* ili */
var tacke = response.routes[0].overview_path,
    newTacke = [tacke.map(function(w) {
    return {
        X: w.lat(),
        Y: w.lng()
    };
})];
Citat:
Originalno napisao mslavko Pogledajte poruku
Koliko sam shvatio dobijam koordinate od googla pa ih prilagodjavam biblioteci da moze da se izvrsi pa kad dobijem rezultat opet moram da priagodim google mapi da bi mogao da se iscrta poligon
Da, napisah u prethodnoj poruci, potrebno je izmeniti polys2path funkciju jer trenutno radi:
Citat:
// converts polygons to SVG path string
Trebalo bi da rezultate koje dobiješ konvertuješ u npr:
Kôd:
[
  new google.maps.LatLng(34.21, 98.7),
  new google.maps.LatLng(7.65, 23.45)
]
dakle vratiš u format sa početka.
__________________
Don't look at me; I'm lost too.
“If you can't dazzle them with brilliance, baffle them with bul*s**t.”

Poslednja izmena od Br@nkoR : 18. 10. 2013. u 23:52.
Br@nkoR je offline   Odgovorite uz citat
Staro 19. 10. 2013.   #10
mslavko
profesionalac
Professional
 
Avatar mslavko
 
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
mslavko is on a distinguished road
Default re

Ali @Branko koliko sam ja citao upravo ova funckcija vraca tacke sa kojima moze da se konstuise bilo SVG bilo Polygon pomocu google mapa:

Kôd:
// converts polygons to SVG path string
function polys2path (poly, scale) {
  var path = "", i, j;
  if (!scale) scale = 1;
  for(i = 0; i < poly.length; i++) {
    for(j = 0; j < poly[i].length; j++){
      if (!j) path += "M";
      else path += "L";
      path += (poly[i][j].X / scale) + ", " + (poly[i][j].Y / scale);
    }
    path += "Z";
  }
  return path;
}
Sta bi ovde trebalo izmenjati?

Osim toga malopre sam probao da pozovem funckciju draw(primer) i time sam dobio kao rezultat tacke sa kojima mogu konstruisati poligon...

Kakva je razlika izmedju konstuisanja SVG i google map poligona?
mslavko je offline   Odgovorite uz citat
Odgovori



Pravila pisanja
Možete ne započinjati nove teme
Možete ne slati odgovore
Možete ne slati priloge
Možete ne izmeniti svoje poruke
vB kôd je Uključen
Smajliji su Uključen
[IMG] kod je Uključen
HTML kôd je Isključen
Pogledajte forum


Vreme je GMT +2. Trenutno vreme je 01:25.


Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.