Vue3 + 腾讯地图 MultiMarker 开发指南

Vue3 是一种现代化的 JavaScript 框架，用于构建高效的 Web 应用程序。腾讯地图是一个流行的 Web 地图服务，提供了各种地图功能和服务。MultiMarker 是腾讯地图的一种功能，用于在地图上显示多个标记点。本文将介绍如何在 Vue3 中使用腾讯地图的 MultiMarker 功能。

安装腾讯地图 SDK

首先，需要在项目中安装腾讯地图 SDK。可以通过 npm 来安装：

npm install --save @tencent/txmap

引入腾讯地图 SDK

在 Vue3 项目中，可以在 main.js 文件中引入腾讯地图 SDK：

import { createApp } from 'vue'
import App from './App.vue'
import TxMap from '@tencent/txmap'

createApp(App).use(TxMap, {
  key: 'your-txmap-key'
}).mount('#app')

在这里，我们使用 createApp 函数创建 Vue 应用程序，并将 TxMap 作为插件使用。在 TxMap 的配置对象中，需要提供一个腾讯地图的 API 密钥。

创建地图组件

接下来，我们需要创建一个地图组件，用于显示腾讯地图。可以在 components 目录下创建一个 Map.vue 组件：

<template>
  <div class='map-container'></div>
</template>

<script>
export default {
  name: 'Map',
  props: {
    center: {
      type: Object,
      default: () => ({ lat: 39.92, lng: 116.46 })
    },
    zoom: {
      type: Number,
      default: 12
    }
  },
  data() {
    return {
      map: null
    }
  },
  mounted() {
    const map = new window.TMap.Map(this.$el, {
      center: new window.TMap.LatLng(this.center.lat, this.center.lng),
      zoom: this.zoom
    })
    this.map = map
    this.$emit('map-ready', map)
  },
  beforeUnmount() {
    this.map && this.map.destroy()
  }
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}
</style>

在这里，我们定义了一个 Map 组件，使用了一个空的 div 元素作为地图容器。在 mounted 生命周期钩子中，我们创建了一个新的地图实例，并将其赋值给组件的 map 属性。在 beforeUnmount 生命周期钩子中，我们销毁地图实例，以避免内存泄漏。

创建 MultiMarker 组件

接下来，我们需要创建一个 MultiMarker 组件，用于在地图上显示多个标记点。可以在 components 目录下创建一个 MultiMarker.vue 组件：

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'MultiMarker',
  props: {
    markers: {
      type: Array,
      default: () => []
    }
  },
  inject: ['map'],
  mounted() {
    this.createMarkers()
  },
  methods: {
    createMarkers() {
      const markerList = this.markers.map((marker) => {
        const position = new window.TMap.LatLng(marker.lat, marker.lng)
        const icon = new window.TMap.MarkerImage(
          marker.icon,
          new window.TMap.Size(40, 40),
          new window.TMap.Point(0, 0)
        )
        const markerObj = new window.TMap.MultiMarker({
          map: this.map,
          icon: icon,
          position: position
        })
        return markerObj
      })
      this.$emit('markers-created', markerList)
    }
  }
}
</script>

在这里，我们定义了一个 MultiMarker 组件，使用了一个空的 div 元素作为容器。在 mounted 生命周期钩子中，我们调用 createMarkers 方法，创建多个标记点，并将它们添加到地图上。

createMarkers 方法中，我们遍历传入的 markers 数组，创建一个新的标记点，并将其添加到地图上。在创建标记点时，我们使用了一个自定义的 icon 图片，并将其设置为标记点的图标。最后，我们将创建的标记点列表作为参数，触发了一个 markers-created 事件。

使用 Map 和 MultiMarker 组件

现在，我们可以在 App.vue 组件中使用 Map 和 MultiMarker 组件了：

<template>
  <div class='app'>
    <Map :center='center' :zoom='zoom' @map-ready='onMapReady'>
      <MultiMarker :markers='markers' @markers-created='onMarkersCreated' />
    </Map>
  </div>
</template>

<script>
import Map from './components/Map.vue'
import MultiMarker from './components/MultiMarker.vue'

export default {
  name: 'App',
  components: {
    Map,
    MultiMarker
  },
  data() {
    return {
      center: { lat: 39.92, lng: 116.46 },
      zoom: 12,
      markers: [
        { lat: 39.92, lng: 116.46, icon: 'marker.png' },
        { lat: 39.93, lng: 116.47, icon: 'marker.png' },
        { lat: 39.94, lng: 116.48, icon: 'marker.png' }
      ]
    }
  },
  methods: {
    onMapReady(map) {
      console.log('Map ready:', map)
    },
    onMarkersCreated(markers) {
      console.log('Markers created:', markers)
    }
  }
}
</script>

在这里，我们使用了 Map 和 MultiMarker 组件，并传入了一些 props 和事件处理函数。在 markers 数组中，我们定义了三个标记点，并使用了一个 marker.png 图片作为它们的图标。

在 Map 组件中，我们使用了 center 和 zoom 属性，指定了地图的中心点和缩放级别。在 MultiMarker 组件中，我们使用了 markers 属性，指定了需要显示的标记点。

在 App.vue 组件中，我们定义了两个事件处理函数，分别处理 map-ready 和 markers-created 事件。在这些事件处理函数中，我们可以获取到地图实例和标记点列表，以进行后续的操作。

总结

在本文中，我们介绍了如何在 Vue3 中使用腾讯地图的 MultiMarker 功能。通过创建 Map 和 MultiMarker 组件，并在这些组件中使用腾讯地图 SDK，我们可以轻松地在 Vue 应用程序中显示多个标记点。在实际开发中，我们可以根据具体需求，进一步扩展和优化这些组件。