在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>
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值