Javascript can'；t在代码中使用从js文件导入的var_Javascript_Html_Variables_Web_Scope

Javascript can'；t在代码中使用从js文件导入的var

javascript html variables web

Javascript can'；t在代码中使用从js文件导入的var,javascript,html,variables,web,scope,Javascript,Html,Variables,Web,Scope,我尝试将导入的vars从js文件导入到我的代码中，但我无法让它以例外的方式工作位置变量js var location = { place: "Bogotá", lat: "4.710988599999999", lng: "-74.072092" }; export { location }; index.html <script type="module"> import { location } from './location_var.j

我尝试将导入的vars从

js

文件导入到我的代码中，但我无法让它以例外的方式工作

位置变量js

var location = {

    place: "Bogotá",
    lat: "4.710988599999999",
    lng: "-74.072092"

};
export { location };

index.html

<script type="module">
    import { location } from './location_var.js'
    console.log(location.lat) // this will be displayed
</script>


从“./location\u var.js”导入{location}
console.log（location.lat）//这将显示

但是如果我在下面添加了

标记，我就不能使用我的变量了

<body>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
        function initMap() {
            var place = { lat: location.lat, lng: location.lng }; // this doesn't work - console says the vars are undefined for some reasons
            var map = new google.maps.Map(
                document.getElementById('map'), { zoom: 4, center: place });
            var marker = new google.maps.Marker({ position: place, map: map });
        }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
        </script>
</body>


函数initMap（）{
var-place={lat:location.lat，lng:location.lng}；//这不起作用-控制台说由于某些原因，变量未定义
var map=new google.maps.map(
getElementById（'map'），{zoom:4，center:place}）；
var marker=new google.maps.marker（{position:place，map:map}）；
}

知道我为什么不能在那里调用它吗？

在模块中定义（或导入）的变量只在该模块中有作用域。如果某个

定义或导入了某个内容，则它在任何其他

标记中都不可见

与普通脚本不同，使用

const

定义的变量名不允许将/var
和函数声明放入全局环境中，因此即使将导入的位置
放入独立变量中，也无济于事
另一个问题是这里有两个异步操作：必须获取location\u var.js
才能获取location
对象，还必须等待下载googleapis脚本。这两个脚本都不依赖于另一个，但您希望在这两个脚本都完成后运行一些东西（初始化映射）。要等待多个异步操作完成，然后运行其他操作，您应该使用Promise.all
，要使用Promise.all
，您需要确保每个异步操作完成后都会解析一个承诺。因此，这里有一种可能的方法：
<script>
window.googleScriptPromise = new Promise((resolve) => {
  window.googleScriptCallback = resolve;
});
window.locationPromise = new Promise((resolve) => {
  window.locationResolve = resolve;
});

Promise.all([
  locationPromise
  googleScriptPromise,
])
  .then(([location]) => {
    // now, location will refer to the imported location, and google maps will have been loaded
  });
</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=googleScriptCallback">
    </script>
<script type="module">
  import { location } from './location_var.js'
  window.locationPromise(location);
</script>

如果您能够更改大部分
的位置，则上述方法更干净，更可取。
如果我更改较低的脚本
类型标记，代码将爆炸-index.html:1 Uncaught（in promise）Xc{消息：“initMap不是函数”，名称：“InvalidValueError”，堆栈：“Error”↵    在新Xc(https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap:125:107“}
<script>
// must use a normal script tag to assign the Promise to window synchronously
window.googleScriptPromise = new Promise((resolve) => {
  window.googleScriptCallback = resolve;
});
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=googleScriptCallback">
    </script>
<script type="module">
import { location } from './location_var.js'
window.googleScriptPromise.then(() => {
  // now, location will refer to the imported location, and google maps will have been loaded
});
</script>