mbcmELDiS

23朵毒蘑菇

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

本来地图显示的好好的,结果用了和风天气后再次初始化就使用不了

高德地图|和风天气

2023-09-25 15:39:48 已有版本 1 个 show:3.09kTYPE: blog

以下所说的都是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>

这是一个简单的使用iframe的例子,在vue项目中大家应该知道怎么使用吧。

这样就完美解决了这个问题。