Fatal编程技术网
  • javascript/
  • 在javascript中调用另一个函数内的函数时发生ReferenceError

在javascript中调用另一个函数内的函数时发生ReferenceError

javascript ajax json function google-maps

在javascript中调用另一个函数内的函数时发生ReferenceError,javascript,ajax,json,function,google-maps,Javascript,Ajax,Json,Function,Google Maps,我编写了一个非常简单的应用程序，其中我使用谷歌绘图库（）让用户在地图上画圆圈（第一个圆圈是源位置，下一个圆圈是目的地，用户只能选择一个源）。此代码还可以获取用户在地图上绘制的圆的横向长度和半径 我可以访问api( 获取？$limit=10&$offset=0&$app\u id=YOUR\u app\u id&$app\u key=YOUR\u app\u key）我必须调用此api url才能获取用户在地图上绘制的圆圈内的单元格id 我的问题：我在控制台中看到此错误ReferenceError

我编写了一个非常简单的应用程序，其中我使用谷歌绘图库（）让用户在地图上画圆圈（第一个圆圈是源位置，下一个圆圈是目的地，用户只能选择一个源）。此代码还可以获取用户在地图上绘制的圆的横向长度和半径

我可以访问api( 获取？$limit=10&$offset=0&$app\u id=YOUR\u app\u id&$app\u key=YOUR\u app\u key）我必须调用此api url才能获取用户在地图上绘制的圆圈内的单元格id

我的问题：我在控制台中看到此错误
ReferenceError:doStaff未定义

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Drawing tools</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link type="text/css" href="res/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="res/jquery.min.js"></script>
    <script type="text/javascript" src="res/jquery-ui.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=drawing,places"></script> 

<script type="text/javascript"> 

  (function () {
     var circle;
     var latitude;
     var longitude;
     var radius;

   function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8
   };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE
      ]
    },
    markerOptions: {
      icon: 'images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'circlecomplete', onCircleComplete);
 }

 function onCircleComplete(shape) {
      var map=shape.getMap();
      var circle;
       //create an array where we store the circles
       if(!map.get('circles')){
          map.set('circles',[]); 
        }
       shape.setOptions(
                      (!map.get('circles').length)
                        ?//first circle
                         {type:'source',
                          fillColor:'#ff0000'
                         }
                        ://other circles
                         {type:'destination'}
                    );
      //push the circles onto the array 
      map.get('circles').push(shape);

        circle = shape;
        var radius = circle.getRadius();
        center = circle.getCenter();
        var latitude = circle.getCenter().lat();
        var longitude = circle.getCenter().lng();

         doStaff();
         alert(radius);

    }  
 google.maps.event.addDomListener(window, 'load', initialize);
})();

function doStuff() {
  var where_stm = 'within_circle('+latitude+','+longitude+','+radius+')';
  var app_id='7b22cb45';
  var app_key='dc836a05b4f775d8813d253ba07a4570';
     $.ajax({
         url: 'https://api.dandelion.eu/datagems/v2/SpazioDati/milano-grid/data',
         type: "GET",
        'content-Type': "application/json",
         dataType: "json",
         data: {where:where_stm, app_id:app_id, app_key:app_key},
         success: function(response) {        
                   console.log(response);
                   },
         error: function(XMLHttpRequest, textStatus, errorThrown) {
                            console.log("error :"+XMLHttpRequest.responseText);
                    }
        });
  }

    </script>
  </head>

<body>
  <div id="container">
     <div id="sidebar-left">
        <p> Please select your source place by using drawing tools on the map. </p>
        Then, you can select one or more destination on the map using the same drawing tools 
     <p>
       <button onClick="doStuff()">Run Code</button>
     </p>
     </div>
     <div id="map-canvas"></div>
    </div>
  </body>
</html>


绘图工具
（功能（）{
var圈；
纬度；
var经度；
变异半径；
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（-34.397150.644），
缩放：8
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
var drawingManager=new google.maps.drawing.drawingManager({
drawingMode:google.maps.drawing.OverlyType.MARKER，
drawingControl：对，
drawingControlOptions：{
位置：google.maps.ControlPosition.TOP_CENTER，
绘图模式：[
google.maps.drawing.overlytype.MARKER，
google.maps.drawing.overlytype.CIRCLE
]
},
标记选项：{
图标：“images/beachflag.png”
},
循环操作：{
填充颜色：'#ffff00'，
不透明度：1，
冲程重量：5，
可点击：false，
是的，
zIndex:1
}
});
drawingManager.setMap（map）；
google.maps.event.addListener（drawingManager，'circlecomplete'，onCircleComplete）；
}
函数onCircleComplete（形状）{
var map=shape.getMap（）；
var圈；
//创建一个数组，在其中存储圆
如果（！map.get（'circles'））{
map.set（'circles'，[]）；
}
shape.setOptions(
（！map.get（'circles'）.length）
？//第一圈
{类型：'source'，
填充颜色：“#ff0000”
}
：//其他圈子
{类型：'destination'}
);
//将圆推到阵列上
map.get（'circles'）。push（shape）；
圆形=形状；
var radius=circle.getRadius（）；
中心=圆。getCenter（）；
变量纬度=circle.getCenter（）.lat（）；
var longitude=circle.getCenter（）.lng（）；
多斯塔夫（）；
警报（半径）；
}  
google.maps.event.addDomListener（窗口“加载”，初始化）；
})();
函数doStuff（）{
其中_stm='在_圆内（'+纬度+'，'+经度+'，'+半径+'）；
var app_id='7b22cb45'；
var app_key='dc836a05b4f775d8813d253ba07a4570'；
$.ajax({
网址：'https://api.dandelion.eu/datagems/v2/SpazioDati/milano-grid/data',
键入：“获取”，
“内容类型”：“应用程序/json”，
数据类型：“json”，
数据：{where:where_stm，app_id:app_id，app_key:app_key}，
成功：功能（响应）{
控制台日志（响应）；
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
log（“错误：+XMLHttpRequest.responseText”）；
}
});
}
请使用地图上的绘图工具选择源位置

然后，可以使用相同的绘图工具在地图上选择一个或多个目的地

运行代码
您已经定义了
doStuff
，但是您调用了
doStaff
，最后一个不存在，如果出现错误，请调用
doStuff
。

您的doStuff方法似乎在匿名函数范围内。您需要将其放到全局范围，以便在onClick属性中访问。

非常感谢。我改变了，但我仍然在控制台中有相同的错误！这次错误行是第1行！！！！！而之前，错误出现在第118行（我称之为doStuff）@mOna，你问题中的问题是，如果解决它会导致另一个问题，那么你应该在一个新问题中提问，我现在将删除我的答案，因为你更新了你的问题哦，对不起，我不知道。。你想让我把我的问题修改成第一个版本吗？然后问一个新问题？很好，因为它是一个打字错误，只需更新您当前的版本以澄清预期的行为，“什么都没有发生”导致问题“应该发生什么”谢谢提供信息，完成：）谢谢帮助，但是现在我得到了一个错误：
ReferenceError:latitude没有在第130行定义，这是
var，其中_stm='在_圆内（'+latitude+'，'+longitude+'，'+radius+'）
我还删除了与匿名函数
（function（）{
和
}）相关的行，现在，我不再收到该错误，但当我单击“运行代码”按钮时，什么也没有发生。。我的ajax调用是否存在som问题？