返回首页
  1.  或代码
  2. 文章
  3. 编程通用
  4. 未分类的问答

thatraja下

节约循环geofence统筹:从谷歌地图|大家好，我已经创建了下面的代码创建一个可调整大小的，圆形geofence使用Google地图。它需要从文本框的地方之一标记，并在所需的位置的经纬度值。这是的圆形geofence的中心。另一个标记是放置在的圆形geofence的边界。现在，我想保存在数据库中的坐标。 PL帮助。
代码:


 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

 

<!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 runat="server">

    <title>Geofencing</title>

    

    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA3VhlbU84rXxxNJIwhgnCZBSuP9ZqWvsczlCo05gzZUKk3SVL5BQDjOk8Uo9hfXvOcey1b2DBrQ_rUA"

      type="text/javascript">

    </script>

    

    <script type="text/javascript"> 

 

    //Global variables 

    var map; 

    var geocoder = null;

    var addressMarker;

    var bounds = new GLatLngBounds; //Circle Bounds 

    var Circle; //Circle object 

    var CirclePoints = []; //Circle drawing points 

    var CircleCenterMarker, CircleResizeMarker; 

    var circle_moving = false; //To track Circle moving 

    var circle_resizing = false; //To track Circle resizing 

    var radius = 1; //1 km 

    var min_radius = 0.5; //0.5km 

    var max_radius = 5; //5km 

 

    //Circle Marker/Node icons 

    var redpin = new GIcon(); //Red Pushpin Icon to resize the circle

    redpin.image = "http://maps.google.com/mapfiles/ms/icons/red-pushpin.png"; 

    redpin.iconSize = new GSize(32, 32); 

    redpin.iconAnchor = new GPoint(10, 32); 

    var garrow = new GIcon(); //Green Arrow Icon to move the circle

    garrow.image = "http://maps.google.com/mapfiles/arrow.png"; 

    garrow.iconSize = new GSize(45, 45); 

    garrow.iconAnchor = new GPoint(10, 32); 

 

    function initialize() 

    { 

        //Initialize Google Map 

        if (GBrowserIsCompatible()) 

        { 

            var lat1 = document.getElementById("txtlat1").value;

            var lng1 = document.getElementById("txtlng1").value;

        

            var map_center = new GLatLng(lat1, lng1); // 19.09353  72.854891

        

            map = new GMap2(document.getElementById("map_canvas")); //New GMap object 

            map.setCenter(map_center); 

 

            var ui = new GMapUIOptions(); //Map UI options 

            ui.maptypes = { normal:true, satellite:true, hybrid:true, physical:false } 

            ui.zoom = {scrollwheel:true, doubleclick:true}; 

            ui.controls = { largemapcontrol3d:true, maptypecontrol:true, scalecontrol:true }; 

            map.setUI(ui); //Set Map UI options 

 

            addCircleCenterMarker(map_center); 

            addCircleResizeMarker(map_center); 

            drawCircle(map_center, radius); 

            

            geocoder = new GClientGeocoder(); 

        } 

    } 

 

    // Adds Circle Center marker 

    function addCircleCenterMarker(point) 

    { 

        var markerOptions = { icon: garrow, draggable: true }; 

        CircleCenterMarker = new GMarker(point, markerOptions); 

        map.addOverlay(CircleCenterMarker); //Add marker on the map 

        GEvent.addListener(CircleCenterMarker, 'dragstart', function() 

        { 

            //Add drag start event 

            circle_moving = true; 

        }); 

        GEvent.addListener(CircleCenterMarker, 'drag', function(point) 

        { 

            //Add drag event 

            drawCircle(point, radius); 

        }); 

        GEvent.addListener(CircleCenterMarker, 'dragend', function(point) 

        { 

            //Add drag end event 

            circle_moving = false; 

            drawCircle(point, radius); 

        }); 

        

    } 

    

    // Adds Circle Resize marker 

    function addCircleResizeMarker(point) 

    { 

        var resize_icon = new GIcon(redpin); 

        resize_icon.maxHeight = 0; 

        var markerOptions = { icon: resize_icon, draggable: true }; 

        CircleResizeMarker = new GMarker(point, markerOptions); 

        map.addOverlay(CircleResizeMarker); //Add marker on the map 

        GEvent.addListener(CircleResizeMarker, 'dragstart', function() 

        { 

            //Add drag start event 

            circle_resizing = true; 

        }); 

        GEvent.addListener(CircleResizeMarker, 'drag', function(point) 

        { 

            //Add drag event 

            var new_point = new GLatLng(map_center.lat(), point.lng()); //to keep resize marker on horizontal line 

            var new_radius = new_point.distanceFrom(map_center) / 1000; //calculate new radius 

            if (new_radius < min_radius) 

                new_radius = min_radius; 

            if (new_radius > max_radius) 

                new_radius = max_radius; 

            drawCircle(map_center, new_radius); 

        }); 

        GEvent.addListener(CircleResizeMarker, 'dragend', function(point) 

        { 

            //Add drag end event 

            circle_resizing = false; 

            var new_point = new GLatLng(map_center.lat(), point.lng()); //to keep resize marker on horizontal line 

            var new_radius = new_point.distanceFrom(map_center) / 1000; //calculate new radius 

            if (new_radius < min_radius) 

                new_radius = min_radius; 

            if (new_radius > max_radius) 

                new_radius = max_radius; 

            drawCircle(map_center, new_radius); 

        }); 

    } 

 

    //Draw Circle with given radius and center 

    function drawCircle(center, new_radius) 

    { 

        //Circle Drawing Algorithm from: http://koti.mbnet.fi/ojalesa/googlepages/circle.htm 

 

        //Number of nodes to form the circle 

        var nodes = new_radius * 40; 

        if(new_radius < 1) nodes = 40; 

 

        //calculating km/degree 

        var latConv = center.distanceFrom(new GLatLng(center.lat() + 0.1, center.lng())) / 100; 

        var lngConv = center.distanceFrom(new GLatLng(center.lat(), center.lng() + 0.1)) / 100; 

 

        CirclePoints = []; 

        var step = parseInt(360 / nodes) || 10; 

        var counter = 0; 

        for (var i = 0; i <= 360; i += step) 

        { 

            var cLat = center.lat() + (new_radius / latConv * Math.cos(i * Math.PI / 180)); 

            var cLng = center.lng() + (new_radius / lngConv * Math.sin(i * Math.PI / 180)); 

            var point = new GLatLng(cLat, cLng); 

            CirclePoints.push(point); 

            counter++; 

        } 

        CircleResizeMarker.setLatLng(CirclePoints[Math.floor(counter / 4)]); //place circle resize marker 

        CirclePoints.push(CirclePoints[0]); //close the circle polygon 

        if (Circle) 

        { 

            map.removeOverlay(Circle); //Remove existing Circle from Map

        }  

        var fillColor = (circle_resizing || circle_moving) ? 'green' : 'white'; //Set Circle Fill Color 

        Circle = new GPolygon(CirclePoints, '#0000FF', 2, 1, fillColor, 0.2); //New GPolygon object for Circle 

        map.addOverlay(Circle); //Add Circle Overlay on the Map 

        radius = new_radius; //Set global radius 

        map_center = center; //Set global map_center 

        if (!circle_resizing && !circle_moving) 

        { 

            //Fit the circle if it is not moving or resizing 

            fitCircle(); 

            //Circle drawing complete trigger function goes here 

        } 

    } 

 

    //Fits the Map to Circle bounds 

    function fitCircle() 

    { 

        bounds = Circle.getBounds(); 

        map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); 

    } 

    </script> 

       

</head>

 

<body> <%--onload="initialize()" onunload="GUnload()">--%>

    

    <div id="map_canvas" style="width: 500px; height: 300px"></div>

    

    <form id="form1" runat="server">

    

                <div>

                    <br />

                    <asp:Label ID="lbllat1" runat="server" Text="Enter the latitude :" Width="168px">  

                     

                    <asp:TextBox

                        ID="txtlat1" runat="server">

                                 

                    <br />

                    <asp:Label ID="lbllng1" runat="server" Text="Enter the longitude :" Width="168px">  

                    <asp:TextBox ID="txtlng1" runat="server"><br />

                    <br />

                                           

                                           

                                           

                       

                    <br />

                                           

                          

                    <input id="btnSubmit" type="button" value="Submit" onclick="initialize()"/>

                </div>

    </form>

    

</body>

 

</html>

 



 
| debo_india

回答