vue 和腾讯地图

142 阅读1分钟

今天研究了一下怎么在vue里引用腾讯地图,腾讯地图只提供了script的引入方式连npm都没有,以下是代码

// 为了方便直接写在APP.vue里面
<template>
<div id="all-map" class="map" ></div>
</template>

<script>
/* eslint-disable no-undef */
export default {
  data () {
    return {
    }
  },
  methods: {
    TencentMap () {
      var center = new qq.maps.LatLng(31.755281, 119.945394)

      // eslint-disable-next-line no-unused-vars
      var map = new qq.maps.Map('all-map', {

        center: center, // 地图的中心地理坐标。

        zoom: 10// 地地图缩放

      })
    }

  },
  mounted () {
    this.TencentMap()
  }
}
</script>
<style>
.map{

            width: 600px;

            height: 600px;

}
</style>

然后在index.html里面写入script引入文件就行

    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=这里填写你自己的key
    "></script>