Vue3 中使用 vue-baidu-map-3x 实现 marker 移动到指定坐标位置

在Vue3中，可以使用vue-baidu-map-3x组件库来实现marker移动到指定坐标位置。\n\n首先，安装vue-baidu-map-3x库：\nbash\nnpm install vue-baidu-map-3x\n\n\n然后，在需要使用地图的组件中，导入和注册vue-baidu-map-3x：\njavascript\nimport VueBaiduMap from 'vue-baidu-map-3x';\n\nexport default {\n components: {\n VueBaiduMap,\n },\n // ...\n}\n\n\n接下来，在模板中使用vue-baidu-map-3x组件，并定义地图的中心点和marker的坐标：\nhtml\n<template>\n <vue-baidu-map :ak="yourBaiduMapAK" :center="mapCenter" :zoom="13" style="width: 100%; height: 400px;">\n <vue-baidu-map-marker :position="markerPosition" :animation="animation"></vue-baidu-map-marker>\n </vue-baidu-map>\n</template>\n\n在上面的代码中，yourBaiduMapAK是你申请的百度地图AK，mapCenter是地图的中心点坐标，markerPosition是marker的坐标，animation是marker的动画效果。\n\n最后，在Vue组件的data中定义地图的中心点和marker的坐标，并提供一个方法来移动marker到指定的坐标位置：\njavascript\nexport default {\n data() {\n return {\n yourBaiduMapAK: 'yourBaiduMapAK',\n mapCenter: { lng: 116.404, lat: 39.915 },\n markerPosition: { lng: 116.404, lat: 39.915 },\n animation: null,\n };\n },\n methods: {\n moveMarkerToPosition(position) {\n this.markerPosition = position;\n },\n },\n // ...\n}\n\n\n现在，当调用moveMarkerToPosition方法并提供新的坐标位置时，marker将会移动到指定的位置。\n\n希望对你有帮助！