Question

我想在google maps-v3上绘制一个圆圈。无法从html调用oldDrawHandler（）方法onClick事件。如何在onclick事件上调用javascript方法，在jquery（）;中定义。请帮忙!!!

<head>
<script type="text/javascript">
 var init = function() {

 $.getJSON('web_services/latlong.php?option=2&id='+id, function(json) {

           $.each(json.result,function(i,gmap){
    latitude=gmap.latitude;
    longitude=gmap.longitude;
        var image = 'vw-beetle-icon.png'
            var latlng= new google.maps.LatLng(latitude, longitude)
            var opts = {
                zoom: 16,
                center:latlng , // London
                mapTypeId: google.maps.MapTypeId.ROADMAP,
        icon: image
                       };
             var map = new google.maps.Map(document.getElementById('map'), opts);
         var Marker = new google.maps.Marker({
                      position: latlng,
                      map: map,
                      icon: image
                          });


        var getPoints = function(lat, lng, radius, earth){
            // Returns an array of GLatLng instances representing the points of the   radius circle
            var lat = (lat * Math.PI) / 180; //rad

            var lon = (lng * Math.PI) / 180; //rad
            var d = parseFloat(radius) / earth; // d = angular distance covered on earth's surface
            var points = [];
            for (x = 0; x <= 360; x++) 
            { 
                brng = x * Math.PI / 180; //rad

                var destLat = Math.asin(Math.sin(lat)*Math.cos(d) + Math.cos(lat)*Math.sin(d)*Math.cos(brng));
                var destLng = ((lon + Math.atan2(Math.sin(brng)*Math.sin(d)*Math.cos(lat), Math.cos(d)-Math.sin(lat)*Math.sin(destLat))) * 180) / Math.PI;
                destLat = (destLat * 180) / Math.PI;
                points.push(new google.maps.LatLng(destLat, destLng));
            }
            return points;
        }

        var polygonDestructionHandler = function() {
           this.setMap(null);
    //marker.setMap(null);
        }

        var polygonDrawHandler = function(e) {
            // Get the desired radius + units
            var select = document.getElementById('unitSelector');
            var unitKey = select.getElementsByTagName('option')[select.selectedIndex].value;

            var earth = earthRadiuses[unitKey];
            var radius = parseFloat(document.getElementById('radiusInput').value);
            // Draw the polygon
            var points = getPoints(e.latLng.lat(), e.latLng.lng(), radius, earth);
    //alert(e.latLng.lat());

            var polygon = new google.maps.Polygon({
                paths: points,
                strokeColor: '#004de8',
                strokeWeight: 1,
                strokeOpacity: 0.62,
                fillColor: '#004de8',
                fillOpacity: 0.27,
                geodesic: true,
                map: map
            });
    //alert(radius);

            google.maps.event.addListener(polygon, 'rightclick', polygonDestructionHandler);

        }


    var oldDrawHandler = function() {
    [select.selectedIndex].value;
    var unitKey = 'mt';
            var earth = earthRadiuses[unitKey];

    var radius = 2000;
            lt=13.0497548596428;
        ln=77.6202746243287;
            var points = getPoints(lt, ln, radius, earth);
    //alert(e.latLng.lat());

            var polygon = new google.maps.Polygon({
                paths: points,
                strokeColor: '#004de8',
                strokeWeight: 1,
                strokeOpacity: 0.62,
                fillColor: '#004de8',
                fillOpacity: 0.27,
                geodesic: true,
                map: map
            });



    google.maps.event.addListener(polygon, 'rightclick', polygonDestructionHandler);


        }



});

});


    }/* end of init()*/

</script>
 </head>

<body onload="init()">

            <a href="javascript:void(0)" onclick="oldDrawHandler();">GeoFence</a>
</body>

Answer 1

为什么要将该函数放入var init（）？
你可以使用jQuery运行相同的代码，并在加载DOM时执行它，这会更快！

$(document).ready(function() {
   // put all your jQuery goodness in here.
});

Answer 2

我想你想要这个：我将点击添加到准备好的

内的链接

<html>
<head>
<script type="text/javascript">
 $(document).ready(function() {
   $.getJSON('web_services/latlong.php?option=2&id='+id, function(json) {
     $.each(json.result,function(i,gmap){
       latitude=gmap.latitude;
       longitude=gmap.longitude;
       var image = 'vw-beetle-icon.png';
       var latlng= new google.maps.LatLng(latitude, longitude);
       var opts = {
         zoom: 16,
         center:latlng , // London
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         icon: image
       };
       var map = new google.maps.Map(document.getElementById('map'), opts);
       var Marker = new google.maps.Marker({
         position: latlng,
         map: map,
         icon: image
       });
       var getPoints = function(lat, lng, radius, earth){
         // Returns an array of GLatLng instances representing the points of the   radius circle
         var lat = (lat * Math.PI) / 180; //rad
         var lon = (lng * Math.PI) / 180; //rad
         var d = parseFloat(radius) / earth; // d = angular distance covered on earth's surface
         var points = [];
         for (x = 0; x <= 360; x++) { 
           brng = x * Math.PI / 180; //rad
           var destLat = Math.asin(Math.sin(lat)*Math.cos(d) + Math.cos(lat)*Math.sin(d)*Math.cos(brng));
           var destLng = ((lon + Math.atan2(Math.sin(brng)*Math.sin(d)*Math.cos(lat), Math.cos(d)-Math.sin(lat)*Math.sin(destLat))) * 180) / Math.PI;
           destLat = (destLat * 180) / Math.PI;
           points.push(new google.maps.LatLng(destLat, destLng));
         }
         return points;
       }
     }); // each
   }); // getJSON

   var polygonDestructionHandler = function() {
     this.setMap(null);
     //marker.setMap(null);
   }

   var polygonDrawHandler = function(e) {
     // Get the desired radius + units
     var select = document.getElementById('unitSelector');
     var unitKey = select.getElementsByTagName('option')[select.selectedIndex].value;
     var earth = earthRadiuses[unitKey];
     var radius = parseFloat(document.getElementById('radiusInput').value);
     // Draw the polygon
     var points = getPoints(e.latLng.lat(), e.latLng.lng(), radius, earth);
     //alert(e.latLng.lat());
     var polygon = new google.maps.Polygon({
       paths: points,
       strokeColor: '#004de8',
       strokeWeight: 1,
       strokeOpacity: 0.62,
       fillColor: '#004de8',
       fillOpacity: 0.27,
       geodesic: true,
       map: map
     });
     //alert(radius);
    }

    $("#geoFenceLink").click(function() {
      var unitKey = 'mt';
      var earth = earthRadiuses[unitKey];
      var radius = 2000,lt=13.0497548596428,ln=77.6202746243287;
      var points = getPoints(lt, ln, radius, earth);
      //alert(e.latLng.lat());
      var polygon = new google.maps.Polygon({
        paths: points,
        strokeColor: '#004de8',
        strokeWeight: 1,
        strokeOpacity: 0.62,
        fillColor: '#004de8',
        fillOpacity: 0.27,
        geodesic: true,
        map: map
      });
    });
    google.maps.event.addListener(polygon, 'rightclick', polygonDestructionHandler);
 }); // document.ready
</script>
</head>
<body>
  <a id="geoFenceLink" href="#">GeoFence</a>
</body>
</html>

调用jquery中定义的javascript方法

2 个答案: