百度很多东西,然后我没找到腾讯地图在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. ubuntu16.04的下载安装

    工具/原料   ubuntu-16.04-desktop-amd64.iso ubuntu-16.04-desktop-i386.iso UltraISO最新版 (自己找渠道去下载,用来将镜像文件烧到 ...

  2. OpenStack(企业私有云)万里长征第二步——使用Fuel部署

    一.前言 最近一直在使用DevStack来安装OpenStack,注意一直二字,部署了一遍又一遍,操作系统怕是安装了不下上百次,有时是为了验证新的方案,有时是安装出错,还有时是运行过程中出错.总之是碰 ...

  3. 用R语言对一个信用卡数据实现logit,GBM,knn,xgboost

    Prepare the data 数据来自UCIhttp://archive.ics.uci.edu/ml/machine-learning-databases/credit-screening,一个 ...

  4. 那些年我遇到的ERP顾问

    当我写下这篇随笔的时候,算起来在我从业9年的时间里,也差不多遇到了4-5拨的ERP咨询顾问,严格来说是4家ERP顾问公司.分别是:IBM.汉得.鼎捷以及盈通金服.从实施水准.技术力量.沟通技巧.做事态 ...

  5. 错误处理1: D:\a1-C++\C++作业\第五次1.cpp undefined reference to `vtable for Shape'

    在编译程序的时候遇到此误,在google上查,很多地方都说是因为虚基类里面的虚拟析构函数没有提供实现导致的.但是我的已经提供了实现,也不行.最后发现是其他没有提供实现的虚函数造成的.所以,在一个虚基类 ...

  6. 前端css要加的一些

    编码格式 @charset "utf-8"; body的外边距设置 margin:0; 标签设置 form,ul,ol,li设置为padding:0; ul,ol,li设置为lis ...

  7. Spring 4学习——问题与注意事项(一)

    1.Spring项目依赖的jar包有5个: 2.applicationContext.xml文件中,如下bean的property的name值对应的是HelloWorld类中的setter方法,即na ...

  8. 在windows下使用Qt5开发GTK3图形界面应用程序

    首先,去MSYS2官网下载MSYS2环境并安装在C:/mysys64下,我安装的是64位的. 进入MSYS命令行执行: pacman -S mingw-w64-x86_64-gtk3 pacman - ...

  9. Bash中的字符串变量扩展

    1.向尾部方向的最小化删除 (%) $pathname="/usr/bin/local/bin"$echo ${pathname%/bin*}/usr/bin/local 2.向尾 ...

  10. php访问数据库$result=$mysql_qurey('')判断是否是空值

    在访问数据库后得到result值,前提是$relust为true,就是没有发生错误连接情况,但是查询的条件由于不满足导致返回值为空,此时判断就不能用!来决定是否有返回数据了,经过书籍搜索,用resul ...