腾讯地图 vue 组件

地图

地图组件

请注意，本文档中所有示例使用的 mapKey 仅作文档测试使用，不定期修改相关配置，请勿使用在任何项目中

基础示例 

<template>
  <tmap-map
    mapKey="TOZBZ-OU2CX-JJP4Z-7FCBV-CDDJ2-AHFQZ"
    :events="events"
    :center="center"
    :zoom="zoom"
    :doubleClickZoom="doubleClickZoom"
    :control="control"
  >
    <div class="ctrl">
      <button @click.stop="move({ lat: 30.290756, lng: 120.074387 })">
        杭州
      </button>
      <button @click.stop="move({ lat: 39.943436, lng: 116.455078 })">
        北京
      </button>
      <button @click.stop="zoomTo(10)">
        zoomTo 10
      </button>
      <button @click.stop="zoomTo(15)">
        zoomTo 15
      </button>
      <button @click.stop="toggleDoubleClickZoom(!doubleClickZoom)">
        toggleDoubleClickZoom: {{ doubleClickZoom }}
      </button>
    </div>
  </tmap-map>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Home',
  setup() {
    const center = ref({ lat: 30.290756, lng: 120.074387 });
    const zoom = ref(10);
    const doubleClickZoom = ref(true);
    const move = (latLng: { lat: number; lng: number }) => {
      center.value = latLng;
    };
    const zoomTo = (value: number) => {
      zoom.value = value;
    };
    const print = (e: unknown) => {
      console.log(e);
    };
    return {
      center,
      zoom,
      doubleClickZoom,
      control: {
        scale: {},
        zoom: {
          position: 'bottomRight',
        },
      },
      events: {
        dblclick: print,
      },
      move,
      zoomTo,
      toggleDoubleClickZoom: (value: boolean) => {
        doubleClickZoom.value = value;
      },
    };
  },
});
</script>

<style lang="scss" scoped>
.ctrl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
}
</style>

props

本组件库自定义属性

名称类型说明
versionStringsdk 版本
mapKeyString开发者 token
librariesString[]地图扩展库，默认包含 ['visualization', 'tools', 'geometry'], 可增加其他库
classString地图容器 classname
styleObject地图容器 style
controlControlType(参考下面的类型定义)地图控件的配置
events{ [key: string]: Function }地图事件
interface ControlType {
  scale: { position: string; className: string };
  zoom: { position: string; className: string };
  rotation: { position: string; className: string };
}

腾讯地图原有属性

名称类型说明
center{ lat:number; lng:number }地图中心点经纬度。
zoomNumber地图缩放级别，支持 3 ～ 20。
minZoomNumber地图最小缩放级别，默认为 3。
maxZoomNumber地图最大缩放级别，默认为 20。
rotationNumber地图在水平面上的旋转角度，顺时针方向为正，默认为 0。
pitchNumber地图俯仰角度，取值范围为 0~80，默认为 0。
scaleNumber地图显示比例，默认为 1。
offset{ x:number; y:number }地图中心与容器的偏移量
draggableBoolean是否支持拖拽移动地图，默认为 true。
scrollableBoolean是否支持鼠标滚轮缩放地图，默认为 true。
doubleClickZoomBoolean是否支持双击缩放地图，默认为 true。
boundaryLatLngBounds地图边界
mapStyleIdString地图样式 ID
baseMapTMap.BaseMap地图底图
viewModeString地图视图模式，支持 2D 和 3D

详细文档见官网 https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap

事件

以事件名为 key，监听函数为 value 的配置对象传入 props.events

地图实例

地图组件的子组件可以通过

const map = inject < Ref < TMap.Map >> 'map';

获取组件的实例 ref