Question

我被要求修改一些看起来像这样的JavaScript代码：

<html>
<head>
<script>
    var text1="foo";
    var text2="bar"
</script>
<script src="/process.js"></script>
</head>

<body>
<div id="container"></div>
</body>
</html>

此代码采用输入text1＆amp; text2，进行一些图像处理，并在体内的div中显示结果图像。如何修改它，以便可以在同一HTML页面上的不同输入值上多次调用JavaScript库，这些内容（实际上）如下所示：

<html>
<head>
<script>
    var image_width=100;
    var image_height=200;
</script>
<script>
    var image_width=50;
    var image_height=150;
</script>

<script src="/process.js"></script>
</head>

<body>
<div id="container"></div>
<div id="container"></div>
</body>
</html>

process.js中的代码是这样的：

var cc1 = $('#canvas_container');
var ctx1 = cc1[0].getContext('2d');

function make_image(){
   $('#container').width(image_width);
   $('#container').height(image_height);
   var cntnr = document.getElementById('container');
   var c1 = document.createElement("canvas");
   c1.width = image_width;
   c1.height = image_height;
   c1.id = "canvas_container";
   cntnr.appendChild(c1);
   // image generation code here
}

感谢您的帮助！

Answer 1

（编辑：昨天这不是谷歌地图的问题吗？如果没有，我应该举一个例子）

让我告诉你如何在函数中使用参数。

你的例子：因此，process.js包含这些函数。调用这些函数，就可以在文件外部进行。

注意：您的示例不会在屏幕上显示任何可见内容。但是两个画布元素都存在。

关键是：对于所有实例都不是一般的，你应该放入一个参数。

的index.php

<html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="process.js"></script>
  <script>
    window.onload = function() {  // do this so the script waits until the page is loaded
      // image1
      make_image('container1', 'canvas1', 100, 200);
      // image2
      make_image('container2', 'canvas2', 50, 150);
    }
  </script>
  </head>
  <body>
    <div id="container1"></div>
    <div id="container2"></div>
  </body>
</html>

process.js

function make_image(container, canvas_id, width, height) {
   $('#' + container).width(width);
   $('#' + container).height(height);

   var cntnr = document.getElementById(container);
   var c1 = document.createElement("canvas");
   c1.width = width;
   c1.height = height;
   c1.id = canvas_id;
   cntnr.appendChild(c1);
   // image generation code here
}

Google地图示例

因此，必须在参数中设置特定于1个map的initialize（）的任何内容。示例：如果您想在map1 / map2上进行不同的缩放，请在lng旁边放置另一个参数＆＃39; zoom＆＃39;，然后使用缩放18调用一个，使用缩放15调用一个。尝试一下。

<!doctype html>
<html>
<head>
  <style>
  #container1, #container2 {
    width: 500px;
    height: 400px;
    margin-bottom: 20px;
  }
  </style>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script>
  // http://stackoverflow.com/questions/30996197/how-to-pass-parameters-to-a-javascript-library-and-how-to-call-it-multiple-times?noredirect=1#comment50061772_30996197
  // gets triggered twice, by page_is_loaded()
  function initialize(container_id, lat, lng) {
      var myLatlng = new google.maps.LatLng(lat, lng);
      var mapProp = {
          center: myLatlng,
          zoom: 17,
          mapTypeId:google.maps.MapTypeId.HYBRID
      };
      var map=new google.maps.Map(document.getElementById(container_id),mapProp);
      return map;  // by doing this, who ever calls this function has the map object, to do what ever one wants.
  }
  // gets triggered when the page is loaded
  function page_is_loaded() {
    var map1 = initialize('container1', 50.89515421660153, 4.341372907161713);    // Atomium, Brussels, Belgium
    var map2 = initialize('container2', 53.34184485510149, -6.286933958530426);  // Guinness Storehouse, Dublin, Irish Republic

    // let's put a marker on map1, at the atomium, on the parking lot, where I left my car
    var marker_atomium = new google.maps.Marker({
      position: new google.maps.LatLng(50.895783519434076, 4.339616060256958),
      map: map1
    });

  }
  // this triggers page_is_loaded(), to be triggered when the DOM of the page is loaded
  google.maps.event.addDomListener(window, 'load', page_is_loaded);
  </script>
</head>
<body>
  <div id="container1"></div>
  <div id="container2"></div>
</body>
</html>

如何将参数传递给JavaScript库以及如何在同一网页上使用不同的输入集多次调用它

1 个答案: