请使用腾讯地图API+VUE3实现效果:生成marker并且跟随鼠标移动
以下是使用腾讯地图API和VUE3实现生成marker并跟随鼠标移动的代码示例:
- 首先在index.html中引入腾讯地图API的js文件:
<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
- 在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>
- 在main.js中创建Vue实例并挂载到DOM上:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- 运行项目,即可看到地图和跟随鼠标移动的marker效果。
注意:在使用腾讯地图API时,需要先申请一个开发者密钥,将YOUR_KEY替换成自己的密钥。
原文地址: https://www.cveoy.top/t/topic/IPF 著作权归作者所有。请勿转载和采集!