地图

地图组件

基础示例

<template>
  <tlbs-map
    ref="mapRef"
    api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
    :center="center"
    :zoom="17"
    :control="control"
    :options="options"
    @click="onClick"
    @map_inited="onMapInited"
  >
    <div class="control-container">
      <button @click.stop="changeCenter({ lat: 40.040417, lng: 116.273514 })">
        北京腾讯总部
      </button>
      <button @click.stop="changeCenter({ lat: 40.008352, lng: 116.389672 })">
        北京亚洲金融大厦
      </button>
      <button @click.stop="getMapInstance">
        打印地图实例
      </button>
    </div>
  </tlbs-map>
</template>

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

export default defineComponent({
  name: 'MapDemo',
  setup() {
    const mapRef = ref(null);
    const center = ref({ lat: 39.91799, lng: 116.397027 });
    const changeCenter = (latLng: { lat: number; lng: number }) => {
      center.value = latLng;
    };
    const onClick = (e: Event) => {
      console.log(e);
    };

    const onMapInited = () => {
      // 地图加载完成后，可以获取地图实例，调用地图实例方法
      console.log(mapRef.value.map);
    };

    const getMapInstance = () => {
      // 可以获取地图实例，调用地图实例方法
      console.log(mapRef.value.map);
    };

    return {
      center,
      onClick,
      onMapInited,
      getMapInstance,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      changeCenter,
      mapRef,
      options: {
        renderOptions: {
          renderOptions: true,
        },
      },
    };
  },
});
</script>

<style scoped>
.control-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
}
button {
  padding: 4px;
  background-color: #fff;
  margin-right: 5px;
  border: 1px solid #ddd;
}
</style>

props

名称	类型	说明
apiKey	String	腾讯位置服务开发Key。
libraries	String	附加库，多个附件库用逗号隔开，默认visualization,geometry,vector,tools。
center	{ lat:number; lng:number }	地图中心点经纬度。
zoom	Number	地图缩放级别，支持3～20。
minZoom	Number	地图最小缩放级别，默认为3。
maxZoom	Number	地图最大缩放级别，默认为20。
control	Object	地图控件的配置，TS类型：Control，
options	TMap.MapOptions	除了上述属性的其他配置参数，点击下面官网文档链接查看

Control类型

interface Control {
  scale: { position: string; className: string } | boolean;
  zoom: { position: string; className: string,  numVisible: boolean} | boolean;
  rotation: { position: string; className: string } | boolean;
}

上述属性数据格式可参考官网文档 https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap

事件

名称	参数	说明
map_inited	-	地图实例初始化事件，可以在回调中获取地图实例，参考上面示例代码使用。

其他事件和GL地图实例事件一致，参考官网文档 https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap

组件实例属性

名称	类型	说明
map	TMap.Map	地图实例。实例方法参考