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

最新推荐文章于 2024-05-27 12:00:44 发布

爱吃黄瓜的喵

最新推荐文章于 2024-05-27 12:00:44 发布

阅读量1.5k

点赞数

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

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

版权

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>

最低0.47元/天解锁文章

爱吃黄瓜的喵

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue中加载腾讯地图（html形式）

vue中引入腾讯地图，目前根据网上的方式有一种 qqmap组件，但是本人才疏学浅，未能探究如何使用，于是乎，就曲线救国，用另一种方式实现了，在vue中引入iframe，然后在iframe中引入html的url路径，来及加载腾讯地图。准备工作1、html编写的腾讯地图（基本上照抄官网就ok的）2、vue中引入iframe标签3、iframe标签中引入html文件4、vue与html的交互，用了一种最笨的方法，通过监听localstorage 来实现的HTML代码如下，建议直接放到项目中publi
复制链接

扫一扫