Javascript 如何在我的场景中使某些变量成为全局变量？_Javascript_Google Maps_Variables_Scope_Global Variables

Javascript 如何在我的场景中使某些变量成为全局变量？

javascript google-maps variables

Javascript 如何在我的场景中使某些变量成为全局变量？,javascript,google-maps,variables,scope,global-variables,Javascript,Google Maps,Variables,Scope,Global Variables,我正在使用GoogleMapsJavaScriptAPI和一个HTML表单，根据用户在表单中输入的纬度和经度坐标在地图上添加一个标记。以下是我的HTML页面中的正文代码： <body> <div id="mainForm"> <form id="mainForm" name="mainForm" method="get"> Latitude: <input type="text" id="latitude" na

我正在使用GoogleMapsJavaScriptAPI和一个HTML表单，根据用户在表单中输入的纬度和经度坐标在地图上添加一个标记。以下是我的HTML页面中的正文代码：

<body>
    <div id="mainForm">
        <form id="mainForm" name="mainForm" method="get">

        Latitude: <input type="text" id="latitude" name="latitude">
        Longitude: <input type="text" id="longitude" name="longitude">
        <input type="submit" name="submit" onClick="results(this.form)">

        </form>
    </div>

    <!--The div element for the map -->
    <div id="map">
    <script>
        var latitudeNew;
        var longitudeNew;
        function results (form) {
            latitudeNew = parseFloat(form.latitude.value);
            longitudeNew = parseFloat(form.longitude.value);
            console.log(latitudeNew);
        }
// Initialize and add the map
function initMap() {
  // The location of the markers
  var UScenter = {lat: 38.1, lng: -96.8};
  var formInput = {lat: latitudeNew, lng: longitudeNew};
  // The map, centered on the U.S.
  var map = new google.maps.Map(
      document.getElementById('map'), {
          zoom: 5,
          center: UScenter,
          disableDefaultUI: true,
          zoomControl: true
      });
  map.setOptions({ minZoom: 3, maxZoom: 20 });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Hello</h1>'+
      '<div id="bodyContent">'+
      '<p>Name</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  // The markers
  var marker = new google.maps.Marker({position: formInput, map: map});
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
    </script>

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
    </script>
    </div>
  </body>


纬度：
经度：
var latitudeNew；
长叶变种；
功能结果（表格）{
latitudeNew=parseFloat（形式.纬度.值）；
longitudeNew=parseFloat（form.longitude.value）；
console.log（latitudeNew）；
}
//初始化并添加映射
函数initMap（）{
//标记的位置
var UScenter={lat:38.1，lng:-96.8}；
var formInput={lat:latitudeNew，lng:longitudeNew}；
//以美国为中心的地图。
var map=new google.maps.map(
document.getElementById（'map'）{
缩放：5，
中心：UScenter，
disableDefaultUI:true，
动物控制：正确
});
setOptions（{minZoom:3，maxZoom:20}）；
var contentString=''+
''+
''+
“你好”+
''+
“名称”+
''+
'';
var infowindow=new google.maps.infowindow({
内容：contentString
});
//标记
var marker=new google.maps.marker（{position:formInput，map:map}）；
marker.addListener（'click'，function（））{
信息窗口。打开（地图、标记）；
});
}

通过查看代码，您可能已经知道，我的表单在提交时调用函数

results

，该函数定义变量

latitudeNew

和

longitudeNew

。这些变量随后在函数

initMap

中使用，以定义带有变量

formInput

的标记的位置。我知道这个问题与我正在创建的单独的全局变量和局部变量有关，但是我试图解决这个问题的各种解决方案对我来说都不起作用，例如将变量定义为

window.latitude/longitude

，以及在函数之外定义变量

因此，我的具体问题是如何定义

latitudeNew

和

longitudeNew

变量，以及将它们放置在何处，以便能够获得用户在表单中插入到Google地图上标记的输入值？

两件事：

映射由

initMap

初始化，它当前是API的回调（因此在用户单击按钮之前，它会在API完成加载时运行）。从API中删除

&callback=initMap

，包括：

工作代码片段：

html，
身体，
#地图{
身高：100%；
宽度“100%；
保证金：0；
填充：0；
}


纬度：经度：
var latitudeNew；
长叶变种；
功能结果（表格）{
latitudeNew=parseFloat（形式.纬度.值）；
longitudeNew=parseFloat（form.longitude.value）；
console.log（latitudeNew）；
initMap（）；
}
//初始化并添加映射
函数initMap（）{
//标记的位置
var UScenter={
lat:38.1，
液化天然气：-96.8
};
变量formInput={
lat:latitudeNew，
液化天然气：longitudeNew
};
var college=“；”
//以美国为中心的地图。
var map=new google.maps.map(
document.getElementById（'map'）{
缩放：5，
中心：UScenter，
disableDefaultUI:true，
动物控制：正确
});
map.setOptions({
minZoom:3，
最大缩放：20
});
var contentString=''+
'' +
'' +
“加州大学圣地亚哥分校”+
'' +
“德文普罗旺斯”+
'' +
'';
var infowindow=new google.maps.infowindow({
内容：contentString
});
//标记
var marker=new google.maps.marker({
位置：formInput，
地图：地图
});
marker.addListener（'click'，function（））{
信息窗口。打开（地图、标记）；
});
}

initMap

在加载API时被调用。

results

在用户单击时被调用。换句话说，

initMap

在其他函数之前被调用。

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">

<input type="submit" name="submit" onClick="results(this.form); return false;">