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

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><script type="text/javascript">// 徒手写监听事件if (window.addEventListener) {window.addEventListener("storage", handleStorage, false);} else {window.attachEvent("onstorage", handleStorage);}function handleStorage(e) {if (!e) {e = window.event;} else {// 解析参数var info = localStorage.getItem("Position");// 删除对应localstore中的数据localStorage.removeItem("Position");// 调用初始化操作initData(info);}}function initData(data) {// 清除容器中的原始数据document.getElementById("container").innerHTML = "";var dataInfo = JSON.parse(data);var centerStartLat = 42.326622;var centerStartLng = 86.375323;var centerEndLat = 42.326622;var centerEndLng = 86.375323;var path = [];if (!dataInfo) {return ;}var dataCount = dataInfo.length;for (var i = 0; i < dataCount; i++) {if (i == 0) {centerStartLat = dataInfo[i].lat;centerStartLng = dataInfo[i].lng;}// 是最后一个元素if (i == (dataCount - 1 )) {centerEndLat = dataInfo[i].lat;centerEndLng = dataInfo[i].lng;}path.push(new TMap.LatLng(dataInfo[i].lat, dataInfo[i].lng));}var center = new TMap.LatLng(centerStartLat, centerStartLng);//初始化地图var map = new TMap.Map("container", {zoom: 15,center: center});var polylineLayer = new TMap.MultiPolyline({map, // 绘制到目标地图// 折线样式定义styles: {'style_blue': new TMap.PolylineStyle({'color': '#3777FF', //线填充色'width': 4, //折线宽度'borderWidth': 2, //边线宽度'borderColor': '#FFF', //边线颜色'lineCap': 'round' //线端头方式})},geometries: [{styleId: 'style_blue',paths: path}],});var marker = new TMap.MultiMarker({map,styles: {'car-down': new TMap.MarkerStyle({'width': 40,'height': 40,'anchor': {x: 20,y: 20,},'faceTo': 'map','rotate': 180,'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',}),"start": new TMap.MarkerStyle({"width": 25,"height": 35,"anchor": { x: 16, y: 32 },"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'}),"end": new TMap.MarkerStyle({"width": 25,"height": 35,"anchor": { x: 16, y: 32 },"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'})},geometries: [{id: 'car',styleId: 'car-down',position: new TMap.LatLng(centerStartLat, centerStartLng),}, {"id": 'start',"styleId": 'start',"position": new TMap.LatLng(centerStartLat, centerStartLng)}, {"id": 'end',"styleId": 'end',"position": new TMap.LatLng(centerEndLat, centerEndLng)}]});marker.moveAlong({'car': {path,speed: 250}}, {autoRotation: true});}</script>
</body>
</html>

vue项目核心的代码引入代码如下

<div><!-- 这里是src需要注意，qqmap.html 是放在public里面的 --><iframe src="/qqmap.html" id="iframeId" frameborder="0" scrolling="auto" class="iframeClass"></iframe>
</div>

vue中加载腾讯地图（html形式）相关推荐

leaflet加载腾讯地图 (路网、影像、地形) 示例教程034
第034个点击查看专栏目录本示例的目的是介绍演示如何在vue+leaflet加载腾讯地图,这里使用了control.layers进行切换3种不同的百腾讯底图. 直接复制下面的 vue+leafle ...
高德地图 Vue 中加载数据可视化 Loca 的方式
高德地图 Vue 中加载数据可视化 Loca 的方式今天想用 Loca 试试如何的,结果怎么都加载不上,我的代码是这样的 AMapLoader.load({key: "这个就不展示了& ...
leaflet 加载腾讯地图
地图切片,又叫地图瓦片,,个人比较喜欢叫切片. leaflet 默认的地图切片规则是,切片原点在左上角(即[85.05112877980659,-180]),而腾讯地图的使用切片规则是,其他不变,原点 ...
如何在OsgEarth中加载谷歌卫星地图的ArcGISServer服务教程
说明: 本实例演示如何在arcgis中发布下载好的影像瓦片数据,在osgearth中加载发布好的瓦片服务. 本实例使用软件版本:ArcGIS10.2,osg3.3.1和osgEarth2.5 VC10 ...
如何在微信小程序中加载自己的地图数据
由于微信小程序无法进行DOM操作,导致像openlayers.leaflet这种常用的js库无法在微信小程序内使用,导致加载高德.百度.mapbox还有自定义的瓦片地图数据变得很困难. 目前,大多数情 ...
Vue中加载mapv和mapvgl
一,加载mapv mapv示例地址:https://mapv.baidu.com/examples/ 1,引入百度地图和mapv 在public/index.html中引入: <script t ...
vue异步加载amap高德地图,解决刷新浏览器地图不显示问题
创建amap.js /** 异步创建script标签*/ export default function MapLoader () {return new Promise((resolve, reje ...
vue中加载loading
首先在components文件夹中新建一个loading.vue组件: 1.loading.vue组件内容如下: <template><div class="markbox ...
177：vue+openlayers 加载多种形式Esri地图
第177个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中添加Esri地图,并且含多种的表现形式. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行 ...

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

vue中加载腾讯地图（html形式）相关推荐

最新文章

热门文章