＜iframe＞标签的使用

最新推荐文章于 2024-06-20 15:06:48 发布

码农小白-RMS

最新推荐文章于 2024-06-20 15:06:48 发布

阅读量461

点赞数 17

分类专栏：其他分享文章标签：前端

本文链接：https://blog.csdn.net/LM0916/article/details/139155025

版权

其他分享专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言：

最近做项目需要使用到腾讯位置服务（这个之后分享），其中用到了一个之前一直没用到的标签：＜iframe＞，一时居然不知道这个是干什么用的。今天分享一下。

下面这段代码是我用来测试地图的html代码，直接复制粘贴使用即可：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>点击地图拾取POI</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      height: 100%;
    }

    #mapContainer {
      position: relative;
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

<body onload="init()">
  <div id='mapContainer'></div>
  <script>
    var map;

    function init() {

      var drawContainer = document.getElementById('mapContainer');

      var center = new TMap.LatLng(39.953416, 116.380945);

      map = new TMap.Map(drawContainer, {
        zoom: 13,
        pitch: 40,
        center: center
      });

      // 创建信息窗
      let info = new TMap.InfoWindow({
        map,
        position: map.getCenter()
      }).close();
      map.on('click', (evt) => {
        // 获取click事件返回的poi信息
        let poi = evt.poi;
        if (poi) {
          // 拾取到POI
          info.setContent(poi.name).setPosition(poi.latLng).open();
        } else {
          // 没有拾取到POI
          info.close();
        }
      });

    }
  </script>
</body>

</html>

效果大致是这样：