以下所说的都是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项目中大家应该知道怎么使用吧。
这样就完美解决了这个问题。
原文