在vue中使用qqmap腾讯地图

在index.html的head里引入依赖

  <script charset="utf-8"
          src="https://map.qq.com/api/js?v=2.exp&key=自己腾讯地图的key&libraries=drawing,geometry"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

在组件里使用（封装成组件）

<template>
    <div ref='thismap' id="map"></div>
</template>
<script>
export default {
  props: {
    mapLoaded: {
      type: Function,
      default: () => {

      }
    }
  },
  data() {
    return {
      map: null
    };
  },
  methods: {
    async init() {
      // 创建地图
      this.map = new qq.maps.Map(this.$refs.thismap, {
        // 地图的中心地理坐标
        center: new qq.maps.LatLng(32.15079, 118.71084),
        // 地图缩放级别
        zoom: 16,
        // 地图的默认鼠标指针样式 pointer crosshair
        draggableCursor: undefined,
        // 拖动地图时的鼠标指针样式
        draggingCursor: 'pointer',
        // 该key绑定的style1对应于经典地图样式，若未绑定将弹出无权限提示窗
        mapStyleId: 'style1'
      });
      window.qmap = this.map;
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang="less" scoped>
  #map {
    width: 100%;
    height: 100%;
  }
</style>

在需要使用的地方引用

<template>
	<div class="map-right">
		 <qqmap />
	</div>
</template>
<script>
import qqmap from "@/components/map/qqmap"
export default {
  components: {
    qqmap
  }
};
</script>