文章目录
- 最终效果
- 一、在高德的开放平台申请key
- 二、下载依赖:
- 三、完整代码
最终效果
页面显示高德地图
一、在高德的开放平台申请key
在高德的开放平台申请key: https://console.amap.com/dev/key/app
申请的类型为web端(js api)
否则会报错:<AMap JSAPI> KEY异常,错误信息:USERKEY_PLAT_NOMATCH
二、下载依赖:
npm install @amap/amap-jsapi-loader
三、完整代码
<template> <div> <div id="container" ref="amap"></div> </div></template> <script> import AMapLoader from '@amap/amap-jsapi-loader'; export default { name: "Class", data() { return { }; }, created() { this.initAMap(); }, methods: { initAMap() { AMapLoader.load({ key: '', // 申请好的keyversion: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 plugins: [] // 需要使用的的插件列表,如比例尺'AMap.Scale'等,如果是地图控件,必须再 map.addControl添加 }) .then((AMap) => { this.map = new AMap.Map('container', { // 设置地图容器id //viewMode: '3D', // 默认2d地图模式 zoom: 12, // 初始化地图级别 zooms: [5, 30], // 地图缩放范围 // 可以设置初始化当前位置 center: [116.397428, 39.90923] // 初始化地图位置 }) }) }, } };
</script> <style scoped lang="scss"> #container { padding: 0px; margin: 0px; width: 100%; height: 900px; }
</style>