使用 vue 开始使用 Goldmap 应用程序接口
最编程
2024-05-01 20:17:33
...
文章目录
- 最终效果
- 一、在高德的开放平台申请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: '', // 申请好的key
version: '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>