Question

我正在尝试使用wordpress来构建一个集成谷歌地图的网站。我正在使用地图进行一些覆盖，并使用Google开发人员API和Python来制作相应的javascript。我已经成功编写了完成此操作所必需的js文件和Python。

我的网站是在Worpress中构建的，我想添加一个包含 n 链接的页面（不是主页），每个页面都会填充一个带有相应地图的框。我可以处理布局和设计问题，但我对如何：

感到茫然

a）将javascript包含为

文件

b）点击链接后调用，从而填充该地图而不调用新页面

也就是说，javascript是巨大的，因为它可能包含数千个纬度/经度点。因此，将这些写入标题的 n 包含在内是不合理的。我想在单击链接时从 filename.js 中调用它。

有一个插件允许我在标题中包含我想要的任何内容。所以，如果我能找到将* .js文件（或txt文件）放在目录树中的位置以及如何在点击时激活相应的文件我应该是好的。谢谢！

这种Display different maps with onClick event - Google Maps V3.类型有助于进行点击显示，但每个人的解决方案是制作一张地图。我不能这样做。我覆盖了大量的数据。

Answer 1

这是一种可以完成这项工作的方法。（跳到脚本的入门部分。）

为简洁起见，我在一个文件中包含了一堆脚本，但您想要将它们分成单个文件。

您可能还需要在jsbin js bin example中尝试html和js，b / c SO可能允许也可能不允许动态加载js。

＆＃13;

(function(undefined) {
  /**
   * @author (@colecmc)
   * @method turn collection into an array
   * @param {object} collection - NodeList, HTMLCollection, etc. Should have an "item" method and/or a "length" property
   */
  ToArray = collection => Array.prototype.slice.call(collection);

  /** \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ **/


  Observer = (function(undefined) {
    /**
     * pub sub
     */
    'use strict';

    var subUid = -1;
    return {
      topics: {},

      subscribe: function(topic, func) {
        /**
         * @param {string} topic
         * @param {function} func
         * @returns {string} - a token such as '3'
         * @example Observer.subscribe('any-valid-string',function(name,resp){
                console.log(resp.prop);
            });
         */
        if (!Observer.topics[topic]) {
          Observer.topics[topic] = [];
        }

        var token = (++subUid).toString();
        Observer.topics[topic].push({
          token: token,
          func: func
        });

        return token;
      },

      publish: function publish(topic, args) {
        /**
         * @param {string} topic
         * @param {object} args
         * @returns {boolean} - true if topic is valid, false otherwise
         * @example Observer.publish('any-valid-string',{
                prop: 'this is a test'
            });
         */
        if (!Observer.topics[topic]) {
          return false;
        }

        setTimeout(function() {
          var subscribers = Observer.topics[topic],
            len = subscribers ? subscribers.length : 0;

          while (len--) {
            subscribers[len].func(topic, args);
          }
        }, 0);

        return true;
      },

      unsubscribe: function unsubscribe(token) {
        /**
         * @param {string} token - value should be saved from the original subscription
         * @example Observer.unsubscribe('2');
         * @example Observer.unsubscribe(member); - where member is the value returned by Observer.subscribe();
         */
        var m,
          forEachTopic = function(i) {
            if (Observer.topics[m][i].token === token) {
              Observer.topics[m].splice(i, 1);
              return token;
            }
          };

        for (m in Observer.topics) {
          if (Observer.topics.hasOwnProperty(m)) {
            Observer.topics[m].forEach(forEachTopic);
          }
        }

        return false;
      }
    };
  }(undefined));
  /** \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ **/

  SetAttributes = function(el, attrs) {
    /**
     * @author (@colecmc)
     * @method simple for in loop to help with creating elements programmatically
     * @param {object} el - HTMLElement attributes are getting added to
     * @param {object} attrs - object literal with key/values for desired attributes
     * @example SetAttributes(info,{
     *    'id' : 'utswFormInfo'
     *    'class' : 'my-class-name'
     * });
     */

    'use strict';
    var key;

    for (key in attrs) {
      if (attrs.hasOwnProperty(key)) {
        el.setAttribute(key, attrs[key]);
      }
    }

    return el;
  };

  /** \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ **/


  GetScript = function(url, fullPath) {
    /**
     * @author (@colecmc)
     * @version 1.0.4
     * @requires Swlxws.SetAttributes, Swlxws.Observer
     * @method dynamically add script tags to the page.
     * @param {string} url - relative path and file name - do not include extension
     * @param {string} fullPath - absolute path
     * @example GetScript('myLocalScript');
     * @example GetScript('','https://www.google-analytics.com/analytics.js');
     */

    'use strict';

    function onLoad(event) {
      var result;

      if (event.type === 'load') {
        result = 1;
      } else {
        result = -1;
      }

      Observer.publish('get-script-onload-complete', {
        successful: result,
        eventData: event
      });
    }

    var JSPATH = '/js/',
      /* or where ever you keep js files */
      el = document.createElement('script'),
      attrs = {
        defer: true,
        src: null,
        type: 'text/javascript'
      };

    /** look for a string based, protocol agnostic, js file url */
    if (typeof fullPath === 'string' && fullPath.indexOf('http') === 0) {
      attrs.src = fullPath;
    }

    /** look for any string with at least 1 character and prefix our root js dir, then append extension */
    if (typeof url === 'string' && url.length >= 1) {
      attrs.src = JSPATH + url + '.js';
    }

    SetAttributes(el, attrs);

    el.addEventListener('load', onLoad);
    el.addEventListener('error', onLoad);

    document.body.appendChild(el);

    return el;
  };

  /** \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ **/

  /**
   * Get Started
   */
  function onClick(event) {
    GetScript('', event.target.dataset.namespaceUrl);
  }

  Observer.subscribe('get-script-onload-complete', function(name, resp) {
    /** check to make resp is what you expect, ie: the correct script loaded */
    /** then it is safe to use */
  });

  ToArray(document.querySelectorAll('.load-scripts')).map(script => script.addEventListener('click', onClick, false));

}(undefined));

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>How to include js files in header of wordpress pages that are activated on-click</title>
</head>

<body>

  <a href="#load" class="load-scripts" data-namespace-url="https://www.google-analytics.com/analytics.js">Load Google Analytics</a>

</body>

</html>

＆＃13;

Answer 2

您可以使用函数wp_enqueue_script()仅在所需的模板上加载必要的JS文件。

对于您的大型数据集，我建议您将其缓存在外部.json文件中，并仅在必要时使用wp_enqueue_script()加载它。

Answer 3

好吧，如果onclick事件建议几乎是你想要的，你只关心大量的数据。然后有几种方法可以解决它。我不确定数据集是js文件还是php / json文件，但我在我的一个项目中遇到了类似的问题，不记得正确，但我正在使用maxmind的ip / location数据集。

所以我把大文件分成3个较小的文件。然后我循环遍历每个文件，如果在文件中找到我正在寻找的东西，那么我就打破了。当然，Brian建议缓存并使用CDN会有很大帮助。

如何在单击时激活的wordpress页面的标题中包含js文件

3 个答案: