使用高德地图和和风天气后，高德地图引入的插件就没办法在重新创建了？

23朵毒蘑菇

已于 2023-09-25 15:48:40 修改

阅读量177

点赞数

文章标签： javascript 前端

于 2023-09-25 15:47:37 首次发布

本文链接：https://blog.csdn.net/wjlhanhan/article/details/133274656

版权

以下所说的都是web，js调用，我使用的和风天气是它官网上的免费插件方式https://widget.qweather.com/

高德地图和和风天气冲突

因为和风天气也是用的高德地图，只不过用的版本不一样，所以明明我引入的amap有一些需要的方法，结果使用了和风天气后就没了。和风天气也是采用js，页面上指定一个元素，然后它去操作这个元素。我是用高德地图的方式是直接引用js文件，所以会把amap挂载到window对象上，和风天气也是用的这个window来是用高德地图，所以两者冲突了。

我的解决办法是是用iframe来放和风天气，这样两者的window就区分开了

<!DOCTYPE html>
<html>
<head>
    <title>主页面</title>
</head>
<body>
    <h1>主页面内容</h1>

    <iframe srcdoc='
        <html>
        <head>
            <meta charset="utf-8">
            <title>文档标题</title>
        </head>
        <body>
            <div id="he-plugin-standard"></div>
            <script>
                WIDGET = {
                  "CONFIG": {
                    "layout": "1",
                    "width": "450",
                    "height": "150",
                    "background": "1",
                    "dataColor": "FFFFFF",
                    "key": "你申请的和风天气的KEY"
                  }
                }
            </script>
            <script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
        </body>
        </html>'
        width="500" height="300">
    </iframe>

    <p>这是主页面的其他内容。</p>
</body>
</html>