懂你所需,做你所想
当前位置: 仙桃云科 > 新闻资讯 > 技术指导 >

vue2.0引入腾讯地图

发表日期:2017-07-10文章编辑:仙桃云科网络科技有限公司

百度很多东西,然后我没找到腾讯地图在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>
复制代码

最后,出效果了如下:


如没特殊注明,文章均为仙桃云科网络原创,转载请注明来自>
相关新闻

Java6和Java8在Windows上共存...

最近在做一个Android的项目,一开始安装的是Java8用于项目的开发。但是在项目后期需要用到drozer用于检测项目的安全性,要搭建drozer的测试环境必须要使用Java6,否则会出...

日期:2017-08-30

OpenGL与CUDA互操作方式总结...

一、介绍 CUDA是Nvidia推出的一个通用GPU计算平台,对于提升并行任务的效率非常有帮助。本人主管的项目中采用了OpenGL做图像渲染,但是在数据处理方面比较慢,导致帧率一直...

日期:2017-08-18

nodejs-基础与深入...

01-nodejs介绍 1.什么是nodejs 1. (javascript跑在机器端,服务端)Javascript on the machine 2. (跑在谷歌v8引擎上)A runtime for Google Chrome s V8 Javascript eng...

日期:2017-08-07

InnoDB关键特性之刷新邻接页-异...

Flush neighbor page 1、工作原理 2、参数控制 AIO 1、开启异步IO 一、刷新邻接页功能 1、工作原理 当刷新一个脏页时,innodb存储引擎会检测该页所在区(extent)的所有页,...

日期:2017-07-31

Java8 Stream代码详解+BenchMark...

1、基本介绍 1、创建方式 1、Array的Stream创建 1、直接创建 // main Stream stream = Stream. of ( a , b , c );String [] strArray = new String[] { a , b , c };stream...

日期:2017-07-24

Java 数据类型在实际开发中应用...

在实际编程中,往往存在着这样的数据集,它们的数值在程序中是稳定的,而且数据集中的元素是有限的。在JDK1.5之前,人们用接口来描述这一种数据类型。 1.5以后引入枚举 一...

日期:2017-07-17