vue2.0引入腾讯地图
百度很多东西,然后我没找到腾讯地图在VUE2.0里面的引用。于是根据找的其他地图引用资料进行尝试。步骤如下。
首先在src里面建立了TMap.js的文件,内容如下:
export function TMap(key) {
return new Promise(function (resolve, reject) {
window.init = function () {
resolve(qq)//注意这里
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://map.qq.com/api/js?v=2.exp&callback=init&key="+key;
script.onerror = reject;
document.head.appendChild(script);
})
}
然后,直接使用部分代码,我在map.vue里面使用代码如下:
<template>
<div id="container">
</div>
</template>
<script>
import { TMap } from '../TMap'
export default {
data() {
return {
}
},
mounted() {
TMap('申请的key').then(qq => {
var map = new qq.maps.Map(document.getElementById("container"), {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(39.916527, 116.397128),
zoom: 8
});
});
},
methods: {
},
created: function () {
}
}
</script>
<style>
#container {
min-width:600px;
min-height:767px;
}
</style>
最后,出效果了如下:

vue2.0引入腾讯地图的更多相关文章
- uniapp H5引入腾讯地图
在网上搜索了许多关于uniapp引入腾讯地图的方法都以失败告终,我开发的应用主要使用于H5,小程序与H5是不同的sdk,就不在这说了,况且小程序有手把手教学,可参考腾讯地图官网https://lbs. ...
- VUE:引入腾讯地图并实现轨迹动画
腾讯位置服务JavaScript API 效果: 引入步骤: 在 html 中通过引入 script 标签加载API服务 在一个盒子元素 div 中预先准备地图容器,并在CSS样式中定义地图(容器)显 ...
- 微信小程序引入腾讯地图API方法
微信小程序大热,在小程序过程中,我们很多时候都会用到地图.不管是企业的地址,还是商家的配送都会用到地图: 我在刚写地图这一块时,在网上也参考了很多网友的方法,始终有Bug(类似于地图拖拽是画面抖动,无 ...
- vue2.0 引入font-awesome
网上的大部分教程复杂而且难看懂,其实两步就能搞定. 先cnpm install font-awesome --save引入依赖 然后在main.js引入 font-awesome/css/font-a ...
- vue2.0引入现有css文件
1.在vue文件中的<style>内填写需要引用的文件 如: @import "./css/indexTest.css";
- Vue集成腾讯地图和几何库
关于Vue中如何引入腾讯地图,百度搜索中的结果已经非常明确: /** * 腾讯地图. * @param key * @returns {Promise<any>} * @construct ...
- Echarts3.0 引入百度地图(转载)
转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...
- vue2.0 在main.js引入scss文件报错
在vue2.0的main.js中引入scss文件报错 原因是在 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/, loade ...
- 地图API使用文档-以腾讯地图为例
目录 腾讯地图API 2 1.API概览... 2 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 2 1.2 URL API:... 2 1.3 静态图AP ...
随机推荐
- 关于JAVA自带MD5的方法
有空再详细解释 import java.security.MessageDigest; public class MD5 { public final static String MD51(Strin ...
- java集合(1)- 类底层数据结构分析
Java 集合类图 参考:http://www.cnblogs.com/xwdreamer/archive/2012/05/30/2526822.html
- Flight学习(一)
翻看git时看到有新消息提示,点进去第一个就是Flight,那么今天就简单来翻译和了解一下这个框架吧,锻炼下自己的英文文档阅读能力,同时也熟悉下JavaScript.时间太赶,难免出现翻译失误和错误, ...
- Handling Class Imbalance with R and Caret - An Introduction
When faced with classification tasks in the real world, it can be challenging to deal with an outcom ...
- Graphical Analysis of German Parliament Voting Pattern
We use network visualizations to look into the voting patterns in the current German parliament. I d ...
- String为值类型还是引用类型
关于String为值类型还是引用类型的讨论一直没有平息,最近一直在研究性能方面的问题,今天再次将此问题进行一次明确.希望能给大家带来点帮助. 如果有错误请指出. 来看下面例子: //值类型 int a ...
- python-冒泡排序与插入排序
def bubble_sort(L): """ 设计思路:从前往后遍历列表,每次选取列表中两个数进行比较,如果不符合排序的规则,则进行交换 这样一次遍历后,最大(最小)的 ...
- Java经典编程题50道之二十六
请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续判断第二个字母. public class Example26 { public static void main(Stri ...
- springMvc <form action="">提交跳转路径问题
表单提交后,action的URL写的是, login/login.do,每次跳转后都变成login/ login/login.do,很显然是相对路径没有搞清楚. 应该弄清楚相对路径,并在JSP代码中加 ...
- elememtui(有关权限的那些事)
前言:关于权限路由的那些事儿…… 业务情景描述:现有一个后台管理系统,共存在三种类型的人员,①超级管理员(称作1):②组别管理员(2):③普通用户(3):每种类型的人看到的操作栏并不一样,可以进行的操 ...