调用jquery中定义的javascript方法
[英]call javascript method defined inside jquery
问题描述
I am trying to draw a circle on google maps-v3. 
我想在谷歌地图-v3上绘制一个圆圈。 Unable to call oldDrawHandler() method onClick event from html. 无法从html调用oldDrawHandler（）方法onClick事件。 How to Call a javascript method on onclick event, defined inside a jquery();. 如何在onclick事件上调用javascript方法，在jquery（）;中定义。 Please help!!! 请帮忙！！！
<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>
2 个解决方案
解决方案1
1 2011-12-15 12:51:19
Why do you put that function into the var init() ? 为什么要将该函数放入var init（）？
You could run the same code by using jQuery and execute it when the DOM is loaded which would be faster ! 您可以使用jQuery运行相同的代码，并在加载DOM时执行它，这将更快！
$(document).ready(function() {
// put all your jQuery goodness in here.
});
解决方案2
1 已采纳 2011-12-15 13:01:37
I think you want this: I added the click to the link inside the ready 我想你想要这个：我将点击添加到准备好的链接里面
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
无法调用在javascript中的对象内部定义的方法 - Unable to call a method defined inside an object in javascript
Javascript / jQuery-定义后，“无法调用未定义的方法'push'” - Javascript/jQuery - “Cannot call method 'push' of undefined” while it IS defined
在 JavaScript 中调用该方法内的方法 - Call method inside that method in JavaScript
从iframe调用在父级中定义的javascript方法 - Call javascript method defined in parent from iframe
从JavaScript调用jQuery方法 - Call jQuery method from JavaScript
在JavaScript / jquery中调用bean方法？ - Call a bean method in JavaScript/jquery?
Javascript：在另一个方法中调用一个方法 - Javascript: Call a method inside another method
JQuery html 方法中的 HTML 代码不起作用（它显示内容但 javascript 调用不起作用） - HTML code inside JQuery html method not working (it shows the content but the javascript call is not working)
为什么自调用JavaScript函数中的jQuery document.ready调用在其他作用域函数中定义的函数？ - Why does jQuery document.ready inside a self-invoking JavaScript function call a function defined in a different scoped function?
如何在ajax中调用javascript对象的方法 - How to call a method of a javascript object inside ajax
相关标签