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 = "=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>

最后，出效果了如下：

原文：.html

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 = "=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>

最后，出效果了如下：

原文：.html