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