vue插入使用地图(简易、即用)
分别为您的高德地图 API Key 和包含地图的 DOM 元素的 ID。这样就可以在您的Vue项目中引入高德地图了!在这段代码中,您需要替换。
·
要在Vue项目中引入高德地图,您需要按照以下步骤进行操作:
1.在 index.html 文件中引入高德地图的 JavaScript API:
<script src="//webapi.amap.com/maps?v=1.4.15&key=您的高德地图API Key"></script>
2.安装 vue-amap 库:
npm install vue-amap --save
3.在 main.js 文件中引入并注册 vue-amap:
import Vue from 'vue'
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
4.在 mounted 阶段初始化地图,设置地图中心点和缩放级别:
mounted () {
this.$amap.initAMapApiLoader({
key: '您的高德地图API Key',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'],
// 默认高德SDK版本为1.4.4
v: '1.4.15',
uiVersion: '1.0.11'
})
this.$amap.then(() => {
const map = new this.$amap.Map('your-map-container-id', {
center: [116.397428, 39.90923],
zoom: 13
})
})
}
在这段代码中,您需要替换 您的高德地图API Key 和 your-map-container-id 分别为您的高德地图 API Key 和包含地图的 DOM 元素的 ID。
这样就可以在您的Vue项目中引入高德地图了!
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)