从另一个文件更改 Javascript 变量值

Question

嘿伙计们，我有一个名为 map.php 的文件，我想将代码中显示的中心值更改为从另一个名为 template.js 的 JS 文件传递的不同值。 以前，我使用设置属性和查询选择器 function 更改了其他 HTML 值的值，但我不知道如何访问 JavaScript 变量并更改值。 我不知道查询选择器 function 是否适用于选择 JavaScript 变量。 任何帮助表示赞赏。 非常感谢。

Javascript (map.php)

<script>
var map = new mapboxgl.Map({
container: 'map',  

style:'mapbox://styles/joelcherian/ckkg9x7f2063917o1kexgn9ho',

 center: [115.83333, -32.01667],  // accept change from template.js
 
 zoom: 12  
 
});

</script>

Answer 1

You can access the variable from the other file if they share the same scope: your declaration of map is global (the scope is window) so you can access it just by using it: map.flyTo({ center: yourCenterHere }); .

唯一需要注意的是调用变量的脚本在创建后运行。

现在你有两种方法：

1. 在模板中定义一个变量并在您的map.php中使用它，但在需要它的之前包括您的脚本（ window字是可选的，因为它是默认的全局范围）。

// template.js
window.myCenterVariable = yourCenterHere;

<script src="template.js"></script>
<script>
var map = new mapboxgl.Map({
container: 'map',  

style:'mapbox://styles/joelcherian/ckkg9x7f2063917o1kexgn9ho',

 center: window.myCenterVariable,  
 
 zoom: 12  
 
});

</script>

2. 通过脚本创建 map，然后将其操作到您的template.js文件中：

<script>
window.map = new mapboxgl.Map({
container: 'map',  

style:'mapbox://styles/joelcherian/ckkg9x7f2063917o1kexgn9ho',
 center: [115.83333, -32.01667],  
 zoom: 12  
});

</script>
<!-- NOTE: I include template AFTER the above script has been executed -->
<script src="template.js"></script>

// template.js
window.map.flyTo({ center: yourCenterHere });

Answer 2

首先，您可以将代码写入template.js文件。

const newValue = [0, 0];
module.exports.update = function(mapObj){
    mapObj.center = newValue;
}

您可以在map.js文件中编辑您的代码。

var r=require("./template.js");
var mapObj = {
container: 'map',  

style:'mapbox://styles/joelcherian/ckkg9x7f2063917o1kexgn9ho',

 center: [115.83333, -32.01667],  // accept change from template.js
 
 zoom: 12  
 
};
r.update(mapObj);
var map = new mapboxgl.Map(mapObj);