百度很多东西,然后我没找到腾讯地图在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引入腾讯地图的更多相关文章

  1. uniapp H5引入腾讯地图

    在网上搜索了许多关于uniapp引入腾讯地图的方法都以失败告终,我开发的应用主要使用于H5,小程序与H5是不同的sdk,就不在这说了,况且小程序有手把手教学,可参考腾讯地图官网https://lbs. ...

  2. VUE:引入腾讯地图并实现轨迹动画

    腾讯位置服务JavaScript API 效果: 引入步骤: 在 html 中通过引入 script 标签加载API服务 在一个盒子元素 div 中预先准备地图容器,并在CSS样式中定义地图(容器)显 ...

  3. 微信小程序引入腾讯地图API方法

    微信小程序大热,在小程序过程中,我们很多时候都会用到地图.不管是企业的地址,还是商家的配送都会用到地图: 我在刚写地图这一块时,在网上也参考了很多网友的方法,始终有Bug(类似于地图拖拽是画面抖动,无 ...

  4. vue2.0 引入font-awesome

    网上的大部分教程复杂而且难看懂,其实两步就能搞定. 先cnpm install font-awesome --save引入依赖 然后在main.js引入 font-awesome/css/font-a ...

  5. vue2.0引入现有css文件

    1.在vue文件中的<style>内填写需要引用的文件 如: @import "./css/indexTest.css";

  6. Vue集成腾讯地图和几何库

    关于Vue中如何引入腾讯地图,百度搜索中的结果已经非常明确: /** * 腾讯地图. * @param key * @returns {Promise<any>} * @construct ...

  7. Echarts3.0 引入百度地图(转载)

    转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...

  8. vue2.0 在main.js引入scss文件报错

    在vue2.0的main.js中引入scss文件报错 原因是在 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/, loade ...

  9. 地图API使用文档-以腾讯地图为例

    目录 腾讯地图API 2 1.API概览... 2 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 2 1.2 URL API:... 2 1.3 静态图AP ...

随机推荐

  1. Python yield用法

    yield 官方称是一种生成器,每每遇到这样包含这个关键字的代码,往往有些难读.def testyield(count): for x in xrange(count): print "te ...

  2. Java类加载器详解

    title: Java类加载器详解date: 2015-10-20 18:16:52tags: JVM--- ## JVM三种类型的类加载器- 我们首先看一下JVM预定义的三种类型类加载器,当一个 J ...

  3. zabbix agent安装详解

    安装 Installing repository configuration package Zabbix 2.2 for RHEL5, Oracle Linux 5, CentOS 5: rpm - ...

  4. Python教程(0)——介绍

    What's Python? Python是一种编程语言,由荷兰人Guido van Rossum于1989年,为打发无聊的圣诞节而开发的. Python的优点是语法简洁,代码量比C/C++.Java ...

  5. 浅谈C语言指针

    下面就几种情况讨论指针. 一.指针和变量 变量是存储空间的别名,访问形式是直接访问. 指针访问内存地址是间接访问. 使用指针访问内存的场合:1.局部变量,参数传递    2.动态分配内存 指针本身也是 ...

  6. java学习——平台的安装与部署

    Java 平台安装与部署 jre,jdk安装与部署 1)jre,jdk安装过程(略) 2)部署过程 新建(JAVA_HOME) 变量名:JAVA_HOME 变量值:E:\Program Files ( ...

  7. MVC4加载zTree树小控件

    前言: 第一次学习使用MVC框架,找了个练手项目,加载zTree树小控件.下面我就一步步说明我这次练手的经历以记录.如果有什么错误,希望各位大神帮忙指正,谢谢. 第一步: 利用VS2010新建一个MV ...

  8. HTML+CSS·经常使用的设计方法

    HTML+CSS·经常使用的设计方法: ======================================================= margin[外] = = padding[内] ...

  9. Oracle ORA-39726压缩表删除字段处理方法

    今天在往一个压缩表增加一个字段可以增加成功,但在删除的时候报了个ORA-39726 unsupported add/drop column operation on compressed tables ...

  10. react-router 参数获取

    No BB!!! show me the code. Main.js import { BrowserRouter, Route, Link ,Switch} from 'react-router-d ...