快速上手

---

本节将介绍如何在项目中使用 tlbs-map。

申请腾讯位置服务开发Key

申请链接：https://lbs.qq.com/dev/console/application/mine

注意：示例文档中使用的key是测试用的key，请勿在线上业务中使用，请您替换为上面链接中申请的key。

安装组件库

npm install --save tlbs-map-vue

注意：Node需要在16及以上版本才能安装使用组件库

使用组件

main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import TlbsMap from 'tlbs-map-vue';

createApp(App)
  .use(router)
  .use(TlbsMap)
  .mount('#app');

地图组件使用如下： 注意：需要将第一步申请的Key，传入到tlbs-map组件的api-key参数中

<template>
  <tlbs-map
    ref="map"
    api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
    :center="center"
    :zoom="zoom"
    :control="control"
    @click="onClick"
  >
    <tlbs-multi-marker
      :geometries="geometries"
      :styles="styles"
      :options="options"
    />
  </tlbs-map>
</template>

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

export default defineComponent({
  name: 'MarkerDemo',
  setup() {
    const map = ref(null);
    const center = ref({ lat: 39.91799, lng: 116.397027 });
    const zoom = ref(10);
    const onClick = (e: Event) => {
      console.log(e);
    };
    return {
      center,
      zoom,
      onClick,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      map,
      geometries: [
        { styleId: 'marker',  position: { lat: 39.91799, lng: 116.397027 } },
      ],
      styles: {
        marker: {
          width: 20,
          height: 30,
          anchor: { x: 10, y: 30 },
        },
      },
      options: {
        minZoom: 5,
        maxZoom: 15,
      },
    };
  },
});
</script>