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};
}

但请！这只是没有经过测试的伪代码！

将用户指定的值放入javascript文件中

1 个答案: