Maps.Subgurim.Net

Usuario anónimo  |  Ingresar  |  Regístrate


Polygon Generator Advanced
Volver a galería de código
Autor: subgurim
Publicado: 27/01/2007
Leído: 79100 veces
Comentarios (0)
Valoracion: 4,95757


/**** Explicación / Description  ****/
Ejemplo copiado de un post del blog de GoogleMaps API (http://googlemapsapi.blogspot.com/2007/01/gpolygon-example.html)
Se crean diferentes tipos de polígonos según nuestra elección.

Example copied from a post from the GoogleMaps API Blog (http://googlemapsapi.blogspot.com/2007/01/gpolygon-example.html).
Different kind of polygons are created according to our selection.


/**** Código de servidor / Server code  ****/
using System;

public partial class Galeria_codigo_Ejemplos_RandomPolygons : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
            createScript();
    }

    private void createScript()
    {
        string js = string.Format(@"
   
    /** Utility Functions **/
   // rand - Generates random number from 1 to n, inclusive
    function rand ( n )
    {{
      return ( Math.floor ( Math.random ( ) * n + 1 ) );
    }}

   // byte2hex - Takes number n from 0-255 and converts to hexadecimal string e.g. 'AA'
   // Courtesy Jim Bumgardner of krazydad.com
   function byte2Hex(n)
   {{
    var nybHexString = '0123456789ABCDEF';
    return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
   }}

   // RGB2Color - Takes 3 hexadecimal string color components and concatenates into standard HTML format
   // Courtesy Jim Bumgardner of krazydad.com
   function RGB2Color(r,g,b)
   {{
    return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
   }}


   // mapClick - Handles the event of a user clicking anywhere on the {0}
   // Draws either stars or polygons with random variation in arguments
   // with clicked point as center.

    function mapClick(overlay, clickedPoint) {{
    var polyPoints = Array();
    var mapNormalProj = G_NORMAL_MAP.getProjection();
    var mapZoom = {0}.getZoom();
        var clickedPixel = mapNormalProj.fromLatLngToPixel(clickedPoint, mapZoom);

    var polySmallRadius = rand(60) + 20;
    var polyLargeRadius = polySmallRadius*2 + rand(40);
    var polyNumSides = rand(8) + 2;
    var polySideLength = 360/polyNumSides;
    var polyColor = RGB2Color(rand(255),rand(255),rand(255));
   
    var starMode = document.getElementById('drawMode_stars').checked;
        var polyMode = document.getElementById('drawMode_polys').checked;
    if(starMode){{
          document.getElementById('status').innerHTML = 'Drew <strong>star</strong> with <strong>' + polyNumSides + '</strong> sides, <strong>' + polyColor + '</strong> fill, <strong>' + polySmallRadius + '</strong> small radius, and <strong>' + polyLargeRadius + '</strong> large radius.';

           for (var a = 0; a<(polyNumSides*2+1); a++) {{
        var aRad = polySideLength/2*a*(Math.PI/180);
        var polyRadius = polySmallRadius;
        if(a%2==1){{ // if a is odd, use the large radius
          polyRadius = polyLargeRadius;
        }}   
               var pixelX = clickedPixel.x + polyRadius * Math.cos(aRad);
        var pixelY = clickedPixel.y + polyRadius * Math.sin(aRad);
        var polyPixel = new GPoint(pixelX,pixelY);
        var polyPoint = mapNormalProj.fromPixelToLatLng(polyPixel,mapZoom);
        polyPoints.push(polyPoint);
      }}
    }} else if(polyMode){{ // polygon mode
          document.getElementById('status').innerHTML = 'Drew <strong>polygon</strong> with <strong>' + polyNumSides + '</strong> sides, <strong>' + polyColor + '</strong> fill, and <strong>' + polySmallRadius + '</strong> radius.';

           for (var a = 0; a<(polyNumSides+1); a++) {{
        var aRad = polySideLength*a*(Math.PI/180);
        var polyRadius = polySmallRadius;
               var pixelX = clickedPixel.x + polyRadius * Math.cos(aRad);
        var pixelY = clickedPixel.y + polyRadius * Math.sin(aRad);
        var polyPixel = new GPoint(pixelX,pixelY);
        var polyPoint = mapNormalProj.fromPixelToLatLng(polyPixel,mapZoom);
        polyPoints.push(polyPoint);
      }}
    }} else {{ // circle mode
          polyNumSides = 20;
          polySideLength = 18;
          document.getElementById('status').innerHTML = 'Drew <strong>circle</strong> with <strong>' + polyNumSides + '</strong> sides, and <strong>' + polyColor + '</strong> fill.';

           for (var a = 0; a<(polyNumSides+1); a++) {{
        var aRad = polySideLength*a*(Math.PI/180);
        var polyRadius = polySmallRadius;
               var pixelX = clickedPixel.x + polyRadius * Math.cos(aRad);
        var pixelY = clickedPixel.y + polyRadius * Math.sin(aRad);
        var polyPixel = new GPoint(pixelX,pixelY);
        var polyPoint = mapNormalProj.fromPixelToLatLng(polyPixel,mapZoom);
        polyPoints.push(polyPoint);
      }}
        }}   
    var polygon = new GPolygon(polyPoints,'#000000',2,.5,polyColor,.5);
    {0}.addOverlay(polygon);
     }}

    function clearShapes(){{
    {0}.clearOverlays();
    }}
    ", GMap1.GMap_Id);


        GMap1.addCustomJavascript(js);
        GMap1.addListener(new Subgurim.Controles.GListener(GMap1.GMap_Id, Subgurim.Controles.GListener.Event.click,
            "function(overlay, clickedPoint){mapClick(overlay, clickedPoint);}"));
    }



/**** Código HTML / HTML Code  ****/
    <div>
        Draw mode:
   <input type="radio" name="drawMode" id="drawMode_stars" value="stars" checked /> Stars
   <input type="radio" name="drawMode" id="drawMode_polys" value="polys"/> Polygons
   <input type="radio" name="drawMode" id="drawMode_circles" value="circles"/> Circles
   &nbsp;&nbsp;
   <input type="button" onclick="clearShapes();" value="Clear Shapes"/>
            <cc1:GMap ID="GMap1" runat="server" />
    <div id="status" style="width:500px; height: 60px;">Click a draw mode & start clicking away!</div>
    </div>
Powered by Subgurim.NET