Vue3 中使用 vue-baidu-map-3x 设置坐标并自动跳转 - 详细教程

在 Vue3 中，可以使用 "vue-baidu-map-3x" 插件来设置坐标位置并自动跳转。\n\n首先，安装 "vue-baidu-map-3x" 插件：\n\n\nnpm install vue-baidu-map-3x\n\n\n然后，在你的 Vue 组件中引入并注册 "vue-baidu-map-3x" 插件：\n\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" 插件来显示地图，并设置坐标位置和自动跳转：\n\nhtml\n<template>\n <div>\n <vue-baidu-map :ak=\"yourBaiduMapAK\" :center=\"center\" :zoom=\"zoom\" ref=\"baiduMap\">\n <vue-baidu-map-marker :position=\"markerPosition\"></vue-baidu-map-marker>\n </vue-baidu-map>\n </div>\n</template>\n\n\n在上面的代码中，"yourBaiduMapAK" 是你的百度地图 AK（API Key），"center" 是地图的中心坐标，"zoom" 是地图的缩放级别，"markerPosition" 是标记点的坐标位置。\n\n最后，在 Vue 组件的 "mounted" 钩子中，可以使用 "$refs" 来获取到地图实例，并调用 "setCenter" 方法来自动跳转：\n\njavascript\nexport default {\n // ...\n mounted() {\n const baiduMap = this.$refs.baiduMap;\n const map = baiduMap.getMap();\n map.setCenter(this.center);\n },\n // ...\n}\n\n\n通过上述步骤，你就可以在 Vue3 中设置坐标位置并自动跳转了。记得替换 "yourBaiduMapAK"、"center" 和 "markerPosition" 为你自己的实际值。