Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/12/2012, 10:18
Avatar de vero00809_chinita
vero00809_chinita
 
Fecha de Ingreso: mayo-2012
Mensajes: 21
Antigüedad: 11 años, 10 meses
Puntos: 0
Como puedo optenr la informacion de esta barra en google api maps

HOLA QUE TAL MIREN TENGO UN EJEMPLO DE USO DE LA BARRA DE DIBUJO DE GOOGLE MAPS API PERO EN LO Q ME EHATORADO ES CMO PODER SACAR EN LA PAGINA LA LAT Y LONG DE DONDE LE DOY EL CLICK ALGUIEN ME PODRIA AYUDAR ESTE ES PARTE DEL CODIGO
Código Javascript:
Ver original
  1. var COLORS = [["red", "#ff0000"], ["orange", "#ff8800"], ["green", "#008000"],
  2.               ["blue", "#000080"], ["purple", "#800080"], ["green", "##00786c"]];
  3.         var options = {};
  4.         var lineCounter_ = 0;
  5.         var shapeCounter_ = 0;
  6.         var markerCounter_ = 0;
  7.         var colorIndex_ = 0;
  8.         var featureTable_;
  9.         var map;
  10.  
  11.         function select(buttonId) {
  12.             document.getElementById("hand_b").className = "unselected";
  13.             document.getElementById("shape_b").className = "unselected";
  14.             document.getElementById("line_b").className = "unselected";
  15.             document.getElementById("placemark_b").className = "unselected";
  16.             document.getElementById(buttonId).className = "selected";
  17.         }
  18.  
  19.         function stopEditing() {
  20.             select("hand_b");
  21.         }
  22.  
  23.         function getColor(named) {
  24.             return COLORS[(colorIndex_++) % COLORS.length][named ? 0 : 1];
  25.         }
  26.  
  27.         function getIcon(color) {
  28.             var icon = new GIcon();
  29.             icon.image = "http://google.com/mapfiles/ms/micons/" + color + ".png";
  30.             icon.iconSize = new GSize(32, 32);
  31.             icon.iconAnchor = new GPoint(15, 32);
  32.             return icon;
  33.         }
  34.  
  35.         function startShape() {
  36.             select("shape_b");
  37.             var color = getColor(false);
  38.             var polygon = new GPolygon([], color, 2, 0.7, color, 0.2);
  39.             startDrawing(polygon, "Shape " + (++shapeCounter_), function () {
  40.                 var cell = this;
  41.                 var area = polygon.getArea();
  42.                 cell.innerHTML = (Math.round(area / 10000) / 100) + "km<sup>2</sup>";
  43.             }, color);
  44.         }
  45.  
  46.         function startLine() {
  47.             select("line_b");
  48.             var color = getColor(false);
  49.             var line = new GPolyline([], color);
  50.             startDrawing(line, "Line " + (++lineCounter_), function () {
  51.                 var cell = this;
  52.                 var len = line.getLength();
  53.                 cell.innerHTML = (Math.round(len / 10) / 100) + "km";
  54.             }, color);
  55.         }
  56.  
  57.         function addFeatureEntry(name, color) {
  58.             currentRow_ = document.createElement("tr");
  59.             var colorCell = document.createElement("td");
  60.             currentRow_.appendChild(colorCell);
  61.             colorCell.style.backgroundColor = color;
  62.             colorCell.style.width = "1em";
  63.             var nameCell = document.createElement("td");
  64.             currentRow_.appendChild(nameCell);
  65.             nameCell.innerHTML = name;
  66.             var descriptionCell = document.createElement("td");
  67.             currentRow_.appendChild(descriptionCell);
  68.             featureTable_.appendChild(currentRow_);
  69.             return { desc: descriptionCell, color: colorCell };
  70.         }
  71.  
  72.         function startDrawing(poly, name, onUpdate, color) {
  73.             map.addOverlay(poly);
  74.             poly.enableDrawing(options);
  75.             poly.enableEditing({ onEvent: "mouseover" });
  76.             poly.disableEditing({ onEvent: "mouseout" });
  77.             GEvent.addListener(poly, "endline", function () {
  78.                 select("hand_b");
  79.                 var cells = addFeatureEntry(name, color);
  80.                 GEvent.bind(poly, "lineupdated", cells.desc, onUpdate);
  81.                 GEvent.addListener(poly, "click", function (latlng, index) {
  82.                     if (typeof index == "number") {
  83.                         poly.deleteVertex(index);
  84.                     } else {
  85.                         var newColor = getColor(false);
  86.                         cells.color.style.backgroundColor = newColor
  87.                         poly.setStrokeStyle({ color: newColor, weight: 4 });
  88.                     }
  89.                 });
  90.             });
  91.         }
  92.  
  93.         function placeMarker() {
  94.             select("placemark_b");
  95.             var listener = GEvent.addListener(map, "click", function (overlay, latlng) {
  96.                 if (latlng) {
  97.                     select("hand_b");
  98.                     GEvent.removeListener(listener);
  99.                     var color = getColor(true);
  100.                     var marker = new GMarker(latlng, { icon: getIcon(color), draggable: true });
  101.                     map.addOverlay(marker);
  102.                     var cells = addFeatureEntry("Placemark " + (++markerCounter_), color);
  103.                     updateMarker(marker, cells);
  104.                     GEvent.addListener(marker, "dragend", function () {
  105.                         updateMarker(marker, cells);
  106.                     });
  107.                     GEvent.addListener(marker, "click", function () {
  108.                         updateMarker(marker, cells, true);
  109.                     });
  110.                 }
  111.             });
  112.         }
  113.  
  114.         function updateMarker(marker, cells, opt_changeColor) {
  115.             if (opt_changeColor) {
  116.                 var color = getColor(true);
  117.                 marker.setImage(getIcon(color).image);
  118.                 cells.color.style.backgroundColor = color;
  119.             }
  120.             var latlng = marker.getPoint();
  121.             cells.desc.innerHTML = "(" + Math.round(latlng.y * 100) / 100 + ", " +
  122.   Math.round(latlng.x * 100) / 100 + ")";
  123.         }
  124.  
  125.  
  126.         function initialize() {
  127.             if (GBrowserIsCompatible()) {
  128.                 map = new GMap2(document.getElementById("map"));
  129.                 map.setCenter(new GLatLng(19.559508, -99.206947), 5);
  130.  
  131.                
  132.                 map.addControl(new GSmallMapControl());
  133.                 map.addControl(new GMapTypeControl());
  134.                 map.clearOverlays();
  135.                 featureTable_ = document.getElementById("featuretbody");
  136.                 select("hand_b");
  137.             }
  138.         }