如何使用iframe导入地图组件，并且与山海鲸内元素进行交互
以天地图为例
下面是个index.html文件，一定是index.html
在这里插入代码片
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>天地图－地图API－范例－地图加载单图层</title><scripttype="text/javascript"src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图的key"></script><scripttype="text/javascript"src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.js"></script><style>body,html {width: 100%;height: 100%;margin: 0;font-family: "Microsoft YaHei";}#mapDiv {width: 100%;height: 100%;}// 样式区域 其他样式function onLoad() {var imageURL ="http://t0.tianditu.gov.cn/img_w/wmts?" +"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=c7b7b2cf071dfba1e0f52f4116065c83";//创建自定义图层对象lay = new T.TileLayer(imageURL, {minZoom: 11,maxZoom: 18,});var config = {layers: [lay],};//初始化地图对象map = new T.Map("mapDiv", config);//设置显示地图的中心点和级别map.centerAndZoom(new T.LngLat(经度, 维度), 14);// .........其他配置var labelwd = new T.Label({text: "地图文本标注",position: new T.LngLat(102.82947, 24.95206),offset: new T.Point(-60, -30),});labelwd.setFontSize(10); // 字体大小labelwd.setFontColor("#37ff00");// 字体颜色labelwd.setBackgroundColor("#282923"); // 文本框背景颜色labelwd.setBorderLine(0); //边框labelwd.setOpacity(0.5);// 透明度labelwd.addEventListener("click", hsClick); // 监听点击事件function hsClick() {msg = "hs";window.parent.postMessage(msg, "*"); // 给iframe父元素传递事件消息 内容为 hs}// 向地图上添加标注map.addOverLay(labelwd);}</style><script>var map;var zoom = 13;var lay;var msg;</script></head><body onLoad="onLoad()"><div id="mapDiv"></div></body>
</html>然后我们倒入到山海鲸
打开山海鲸，ctrl+F搜索iframe
右边看到数据源选择 选择本地的这个index.html文件
如果你发现选择文件那里，看不到index.html文件，那么你把index.html文件放入一个空文件夹
然后，数据源选择这个文件夹打开上传就行，看不到没有关系，然后重新加载刷新这个iframe组件就行了
然后地图出现后，还得绑定一个js文件
点击这个iframe元素，右边选择代码，然后上传一个脚本，js文件
文件内容是：
class map{onMessageRecieved(data,origin,source){if (data && data === "hs") {console.log(data);this.element.emit("hsClick");}
}
export default map
这是山海鲸地图自己的方法配置
然后我们点击iframe，右边选择交互，这时候添加交互
名称 随意
事件选择 接收到二次开发中的事件
事件名称 hsClick 就是上面js文件emit的出来的名称
其他要操作的东西自己设置
这时候，锁定iframe,你点开山海鲸右下角的控制台 ,然后点击地图上的文本标注，控制台就是会打印 hs 也是上面js文件里面的 console.log(data) 就会触发后续的配置操作
加油继续卷-------------------
