jquery内で定義されたjavascriptメソッドを呼び出す

Googleマップ-v3で円を描こうとしています。 htmlからoldDrawHandler（）メソッドのonClickイベントを呼び出すことができません。 JQuery（）;の内部で定義されたonclickイベントでjavascriptメソッドを呼び出す方法助けてください！！！jquery内で定義されたjavascriptメソッドを呼び出す

<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>

出典

2011-12-15 nuthan

内のリンクをクリックして追加、jQueryのを使用する： '$（ドキュメント）.ready（関数（）{ $ .getJSON（....）;}）; ' – mplungjan

早速返信ありがとうございます@mplungjan私はページの読み込みを高速に見ました。しかし、まだ、私は "Uncaught ReferenceError：oldDrawHandlerは定義されていません"と言ってコンソールにエラーが表示されます私は他の手段を使用して呼び出す必要がありますか？ – nuthan

下記の私の答えを参照してください。他にも問題がありますが、構造体には – mplungjan

私はあなたがこれをしたいと思います：あなたはjQueryのを使用している場合、私は準備ができて

<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>

出典

2011-12-15 13:01:37 mplungjan

@mplungjanをもう一度感謝します。$（ "＃geoFenceLink"）関数を$ .each（{...}）に配置しなければならなかったので、 earth = earthRadiuses [unitKey];内にスコープはありませんでした。 – nuthan

右。リンクが1つしかないので移動したので、結果ごとにクリックを割り当てます – mplungjan

なぜこの関数をvar init（）に入れるのですか？
jQueryを使用して同じコードを実行して、DOMがロードされたときに実行すると速くなります！

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

出典

2011-12-15 12:51:19

jquery内で定義されたjavascriptメソッドを呼び出す

答えて

関連する問題