高德地图+Vue3基础地图从0到1实现
前言
本文主要讲解如何利用高德地图api与vue3实现对世界地图的可视化显示。
实现效果
流程总结
流程1:Vue3搭建
搭建没什么说的,可以用cli、webpack、vite等构建工具进行初步搭建
注:必须要带eslint.js
流程2:高德地图密钥下载
首先注册高德地图,官网:https://lbs.amap.com/
然后注册开发者,创建应用和密钥。注册成功后在左上角控制台中可以新建应用和密钥。
获取密钥。
流程3:代码实现
首先找到eslint.js文件,并在modules.export中加入代码:
"globals":{
"AMap":"true"
},
上述代码是为了防止AMap报错not undefined。
然后通过在vue.config.js中定义
lintOnSave: false
实现eslint的潜在风险校验不生效。
然后下载依赖:
npm install vue-amap
下载成功后,找到public文件夹中的index.html,加入script代码
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图密钥"></script>
最后就可以写一个组件来实现简易地图啦。
示例:
<template>
<div id="main" style="width: 100%; height: 100vh;"></div>
</template>
<script>
export default {
mounted() {
this.initMap();
},
methods: {
initMap() {
var map = new AMap.Map('main', {
zoom: 2, // 设置地图缩放级别
center: [0, 0], // 设置地图中心点坐标
viewMode: '3D' // 设置地图模式为3D视图
});
}
}
};
</script>
<style scoped>
body {
height: 100%;
width: 100%;
}
.amap-logo {
display: none !important;
}
.amap-copyright {
display: none !important;
}
</style>
在上述组件中,我们在结构中就设置了一个id为main的div块,在script中设置了关于地图的初始化,初始坐标,地图模式等,在style中,.amap相关两个类都是为了隐藏高德地图默认的高德水印。
原文地址:https://blog.csdn.net/lplovewjm/article/details/140446103
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!