vue中加载腾讯地图（html形式）

最新推荐文章于 2024-08-16 14:50:55 发布

爱吃黄瓜的喵

最新推荐文章于 2024-08-16 14:50:55 发布

阅读量1.5k

点赞数

分类专栏： html vue js 文章标签： vue引入html版腾讯地图

本文链接：https://blog.csdn.net/weixin_42152696/article/details/109380929

版权

本文介绍了一种在Vue项目中通过iframe嵌入HTML方式引入腾讯地图的实现方法。首先准备HTML版腾讯地图，然后在Vue组件内插入iframe标签，并指定包含地图的HTML文件路径。最后，利用localStorage进行Vue与HTML之间的简单交互。

摘要由CSDN通过智能技术生成

vue中引入腾讯地图，目前根据网上的方式有一种 qqmap组件，但是本人才疏学浅，未能探究如何使用，于是乎，就曲线救国，用另一种方式实现了，在vue中引入iframe，然后在iframe中引入html的url路径，来及加载腾讯地图。

准备工作
1、html编写的腾讯地图（基本上照抄官网就ok的）
2、vue中引入iframe标签
3、iframe标签中引入html文件
4、vue与html的交互，用了一种最笨的方法，通过监听localstorage 来实现的

HTML代码如下，建议直接放到项目中public文件下

<html>
<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>marker轨迹回放-全局模式</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
  html,
  body {
    
    height: 100%;
    margin: 0px;
    padding: 0px;
  }

  #container {
    
    width: 100%;
    height: 100%;
  }
</style>

<body>
  <div id="container"></div>