Javascript 未捕获引用错误：Google地图中未定义saveData

下面，我将使用RubyonRails代替PHP和MySQL（类要求）。我可以右键单击地图来添加标记，左键单击标记来弹出信息窗口，我可以填写信息窗口，但是当我单击“保存并关闭”时，我会得到错误

未捕获引用错误：未在HTMLInputElement.onclick（@VM83用户：1）上定义saveData

使用

debugger

，我可以确认从未调用

saveData（）

我需要做什么才能将输入的信息保存到infowindow？另外，如果您在下面的mapController.js中输入了我的承诺链（是否正确，等等）

我尝试过的事情

• 根据stackOverflow建议从index.html脚本标记中删除

  async defer

• re

  onclick='saveData（）'

  ，我已经删除了所有排列中的引号和括号
• 我手动键入了找到

  onclick='saveData（）'

  的行
• 我根据stackOverflow建议将saveData函数移动到initilize函数中
• 我根据stackOverflow建议将其重命名为

  infowindow.saveData（）

• 已将saveData（）移到initialize（）上方
• 将所有

  let

  s更改为

  var

  s
• 在_user.html中的div标记中添加了

  onload='initialize（）'

  ，包括嵌套div、移动

  ng控制器等多种排列

• 将代码从mapController.js移动到脚本标记内的_user.html

我的代码 _user.html

mapController.js

angular.module（'tour'）.controller（'mapController'，function（）{
让self=这个，
标记，
信息窗口；
函数初始化（）{
var latlng=新的google.maps.latlng（37.0902，-95.7129）；
变量选项={
缩放：4，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map”），选项）；
var html=“”+
“标题：”+
“说明：”+
“音频URL：”+
“类别：”+
“艺术”+
“历史”+
“文学”+
“音乐”+
" " +
"";
infowindow=新建google.maps.infowindow({
内容：html
});
google.maps.event.addListener（映射，“右键单击”，函数（事件）{
marker=新的google.maps.marker({
位置：event.latLng，
地图：地图
});
google.maps.event.addListener（标记“单击”，函数（）{
信息窗口。打开（地图、标记）；
})；//end addListener
})；//end addListener
}//结束初始化函数
函数saveData（）{
变量标记={
标题：escape（document.getElementById（“title”）.value），
description:escape（document.getElementById（“description”）.value），
音频：document.getElementById（“音频”）.value，
类别：document.getElementById（“类别”）.value，
经度：marker.lng（），
纬度：marker.lat（）
}
返回$http({
url:`${rootUrl}/users/：id/add_marker`，
方法：“POST”，
数据：{marker:marker}，
标题：{
'Authorization'：'Bearer'+JSON.parse（localStorage.getItem（'token'））
}
})
.然后（功能（res）{
让markers=self.currentUser.markers；
让newMarker=res.config.data.marker；
markers.unshift（newMarker）；//添加到数组的开头
})
.catch（函数（错误）{
log（'ERROR~>'，ERROR）；
});
}
初始化（）；
});

尝试按如下方式定义它：

window.saveData=function（）{/*此处的代码*/}

…我知道，这是一个解决办法。我认为问题与角度和范围有关usage@leo.fcx我认为这是可行的，但现在我正试图让我的承诺链做我想做的。一旦我发现了错误，我会让你知道的。谢谢！正如我所说的，我认为你应该检查angular文档以使代码更好。发布我们在全局上下文中的saveData函数不是一个好函数idea@leo.fcx现在我得到了

XMLHttpRequest无法加载localhost:4000/users/：id/add_marker。跨源请求仅支持协议方案：http、data、chrome、chrome扩展、https、chrome扩展资源。

我有nodemon和rails服务器运行，还有cors.rb已设置，否则我将无法执行任何角度/轨道操作。

<div ng-controller="mapController as map" id="map" style="width:100%; height:80vh;"></div>

angular.module('tour').controller('mapController', function() {
let self = this,
marker,
infowindow;
function initialize() {
  var latlng = new google.maps.LatLng(37.0902, -95.7129);
  var options = {
    zoom: 4,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map"), options);
  var html = "<table>" +
             "<tr><td>Title:</td> <td><input type='text' id='title'/> </td> </tr>" +
             "<tr><td>Description:</td> <td><input type='text' id='description'/></td> </tr>" +
             "<tr><td>Audio URL:</td> <td><input type='url' id='audio'/></td> </tr>" +
             "<tr><td>Category:</td> <td><select id='category'>" +
             "<option value='art' SELECTED>art</option>" +
             "<option value='history'>history</option>" +
             "<option value='literature'>literature</option>" +
             "<option value='music'>music</option>" +
             "</select> </td></tr>" +
             "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
  infowindow = new google.maps.InfoWindow({
    content: html
  });

  google.maps.event.addListener(map, "rightclick", function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });
    google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
    }); // end addListener
  }); // end addListener
} // end initialize function

function saveData() {
  var marker = {
    title: escape(document.getElementById("title").value),
    description: escape(document.getElementById("description").value),
    audio: document.getElementById("audio").value,
    category: document.getElementById("category").value,
    longitude: marker.lng(),
    latitude: marker.lat()
  }

  return $http({
    url: `${rootUrl}/users/:id/add_marker`,
    method: 'POST',
    data: {marker: marker},
    headers: {
      'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('token'))
    }
  })
  .then(function(res){
    let markers = self.currentUser.markers;
    let newMarker = res.config.data.marker;
    markers.unshift(newMarker); // adds to beginning of array
  })
  .catch(function(error){
    console.log('ERROR ~>', error);
  });
}

initialize();
});

window.saveData = function(){ /* your code here */ }
onclick="window.saveData()"