将用户指定的值获取到javascript文件中

Question

我有一个谷歌地图应用程序，其中在js文件（map.js）中定义了地图设置，如下所示：

function initialize() {
        var latlng = new google.maps.LatLng(42.133633, -11.469928);
        var myOptions = {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

我的主页（index.php）调用此脚本。 我想让用户指定纬度，经度，缩放级别和地图类型。 为此，我创建了一个表单（setMap.htm），一个客户端验证脚本（setMap.js）和setMap.php，用于验证和清除用户输入。

但是，我不清楚如何将用户指定的值导入map.js。 我可以在map.js中使用ajax吗？

function loadData(){

    $.getJSON('setMap.php', . . . . ?

以及如何用此调用的结果替换函数initialize（）中的硬编码值？

我还需要在setMap.php中进行ajax调用吗？

Answer 1

您可以通过多种方式进行操作。 您刚刚发布的一个： http : //api.jquery.com/jquery.getjson/

$.getJSON( "setMap.php", function( data ) { // Do something here });

您的setMap.php只需要返回有效的json数据。

您也可以在请求期间将数据直接回显为js值：echo'var = {some data}'，但我认为这不是“不错”的解决方案。

另一种选择是：不使用服务器端部分。 只需使用JS从表单中获取数据，对其进行验证即可使用，而无需重新进行php处理（如果您不需要将其保存在某个地方，则实际上不需要在服务器端进行验证）

https://developers.google.com/maps/documentation/javascript/reference?csw=1您应该拥有

var map = google.maps.Map();
map.setOptions({your_options});

因此，您只需从表单中获取选项并在运行中修复地图选项，而无需重新加载页面或ajax请求。

// html
<input id="zoom" type="text" />

// js code
var map;
function initialize() {
        var latlng = new google.maps.LatLng(42.133633, -11.469928);
        var myOptions = {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}
function update() {
        var options = {};
        options.zoom = $('input#zoom').val();
        map.setOptions{options};
}

但是，求求您！ 这只是未经测试的伪代码！