将参数传递给JavaScript中的url回调函数

Question

我有以下一段代码，当用户单击“提交”按钮时，它将显示一个地图。

目前，函数initialize（）没有任何参数，并且地图以固定的纬度和经度为中心。 我希望能够将纬度和经度作为参数，以便地图以此为中心。

我已经有了经度和纬度，因此获取这些参数不是问题； 我的问题是我不知道如何将它们传递给函数。

完整代码：

<!DOCTYPE html>
<html>
    <head>
      <link rel="stylesheet" type="text/css" href="stylesheet.css">
      <title>Simple Map</title>
      <meta name="viewport" content="initial-scale=1.0">
      <meta charset="utf-8">
    </head>
<body>
    <div id="map">

        <button type="button" onclick="loadScript()">submit</button>

    </div>


    <script>

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


        function loadScript() {
            var myKey = "myAPIKey";
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?key=" + myKey + "&sensor=false&callback=initialize";
            document.body.appendChild(script);
        }

    </script>

</body>

仅JavaScript：

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


        function loadScript() {
            var myKey = "myAPIKey";
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?key=" + myKey + "&sensor=false&callback=initialize";
            document.body.appendChild(script);
        }

Answer 1

只需在脚本之前初始化变量即可。 在“ loadScript”函数中更新变量，并在“初始化”函数中使用它们。 对我来说，它有效。

<script>
    var string = "";   // initialize variables here. You need var lat and var lng 

    function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        console.log(string);  // just checking, if it does work in "initialize" function
        var myOptions = { 
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
    myOptions);
    }


    function loadScript() {
        var myKey = "myAPIKey";
        var script = document.createElement('script');
        script.type = 'text/javascript';
        string = "hey it works";   //////////// here take the coordinates
        script.src = "https://maps.googleapis.com/maps/api/js?&sensor=false&callback=initialize";
        document.body.appendChild(script);
    }

</script>

另外，我认为以后可以使用以下命令更改位置：

map.setCenter(new google.maps.LatLng( 45, 19 ) );

希望对您有所帮助

Answer 2

您可以使用Array.prototype.bind将参数预加载到函数中。 即使没有使用任何函数调用，我们也可以使用它来存储参数：

// Modify initialize to accept lat/long
function initialize(lat, long) {
    /* etc */
}

// Pre-load our arguments
var gmapsInitialize = initialize.bind(null, -34.397, 150.644);

现在，您可以将回调设置为gmapsInitialize 。

另一种选择是创建一个高阶函数，当使用lat / long参数调用该函数时返回您的回调：

function initializeFactory(lat, long) {
    return function () {
       /* function body of your original initialize here; make use of lat/long arguments */
    }
}

您可以通过以下方式创建不同版本的initialize ：

var gmapsInitialize = initializeFactory(-34.397, 150.644);

Answer 3

我通过创建一个额外的函数来解决将参数传递给回调的方法，例如：

var id = $($element).attr("id");;
var callBackName = id+"_callback";
window[callBackName] = new Function("googleMapCallback(\""+id+"\")");
script.src = "https://maps.googleapis.com/maps/api/js?&sensor=false&callback=window."+callBackName;

这样，您就可以拥有包含所有内容的元素，然后可以重新使用它。

将参数传递给JavaScript中的url回调函数

问题描述

3 个解决方案

解决方案1
3 已采纳 2016-03-17 14:21:42

解决方案2
1 2016-03-17 14:25:55

解决方案3
1 2019-03-15 11:27:36

将参数传递给JavaScript中的url回调函数

问题描述

3 个解决方案

解决方案1 3 已采纳 2016-03-17 14:21:42

解决方案2 1 2016-03-17 14:25:55

解决方案3 1 2019-03-15 11:27:36

解决方案1
3 已采纳 2016-03-17 14:21:42

解决方案2
1 2016-03-17 14:25:55

解决方案3
1 2019-03-15 11:27:36