网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

如何在vue中引用高德地图

时间:2024-10-12 00:08:13

1、先使用脚手架生成一个vue项目,然后安装在项目里安装vue-amap,安装命令如下:npm install vue-amap --save

如何在vue中引用高德地图

3、在HomeView.vue文件,粘贴以下代码:<template> <div id="amap媪青怍牙"> <el-amap vid="amap" class="amap" :center="center" :plugin="plugin"> <el-amap-marker vid="component-marker" :position="position" /> </el-amap> </div></template><script>export default { data() { return { position: [105.602725, 37.076636], // 定位 center: [105.602725, 37.076636], // 地图初始化视图中心点 plugin: [ // 这里放扩展的插件 { pName: 'Scale', // 比例尺 events: { init(instance) { console.log(instance); } } } ] }; }, mounted() {}, created() { }, methods: {}};</script><style scoped>#amap { height: 100vh; width: 100vw;}</style>

如何在vue中引用高德地图
© 2025 小知经验
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com