以下是使用腾讯地图API和VUE3实现生成marker并跟随鼠标移动的代码示例:

  1. 首先在index.html中引入腾讯地图API的js文件:
<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
  1. 在App.vue中定义地图容器和marker:
<template>
  <div class="map-container" ref="mapContainer"></div>
</template>

<script>
  export default {
    data() {
      return {
        map: null,
        marker: null
      }
    },
    mounted() {
      // 初始化地图
      this.initMap()
    },
    methods: {
      initMap() {
        // 创建地图容器
        this.map = new qq.maps.Map(this.$refs.mapContainer, {
          center: new qq.maps.LatLng(39.916527, 116.397128), // 北京市中心
          zoom: 13
        })

        // 创建marker
        this.marker = new qq.maps.Marker({
          map: this.map,
          position: this.map.getCenter()
        })

        // 监听鼠标移动事件
        qq.maps.event.addListener(this.map, 'mousemove', e => {
          // 更新marker位置
          this.marker.setPosition(e.latLng)
        })
      }
    }
  }
</script>

<style>
  .map-container {
    width: 100%;
    height: 100%;
  }
</style>
  1. 在main.js中创建Vue实例并挂载到DOM上:
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
  1. 运行项目,即可看到地图和跟随鼠标移动的marker效果。

注意:在使用腾讯地图API时,需要先申请一个开发者密钥,将YOUR_KEY替换成自己的密钥。


原文地址: https://www.cveoy.top/t/topic/IPF 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录