十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示【一、基础引入配置】
最近做项目的时候,由于最近天地图卡的起飞,无奈之下只好改用高德,虽然高德地图文档比较完善,但是多少还是有点坑。
建议慢慢食用,能把这篇文章的研究好了,足以轻松在 vue3 中使用高德地图的各种API功能。
此文章内容适用ts,使用js的同学请自行举一反三改造代码。
文内付全代码,供大家学习研究!
最终效果如图所示
vue3的安装我就跳过了。
一、开发准备
-
首先,注册开发者账号,成为高德开放平台开发者
-
登陆之后,在进入「应用管理」 页面「创建新应用」
-
为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」。
-
添加成功后,获取到 Key 值。
-
如需要使用某些特定接口,需要用上安全密钥(例如:坐标转换函数)。
二、地图组件开发和使用
1.按 NPM 方式安装使用 Loader :
npm i @amap/amap-jsapi-loader --save
三、他组件安装使用
1.安装axios 和 element
# axios
npm install axios --save
#vue-axios
npm install vue-axios --save
#vue element-plus
npm install element-plus --save
2.在main.js引入相关组件以及地图基础调用
main.js 代码
import {
createApp } from 'vue'
import './style.css'
import App from './App.vue'
import axios from 'axios';
import VueAxios from 'vue-axios'
// createApp(App).use(axios)
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(VueAxios,axios,ElementPlus).mount('#app')
index.html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=3e4741f5c35ad618981aac48f79231b5"></script> -->
<title>Vite + Vue</title>
<script type="text/javascript">
// 高德地图秘钥,必须在加载JSAPI load.js文件之前
// 此写法在开发环境中使用,生产环境中建议不要将密钥暴露出来
window._AMapSecurityConfig = {
securityJsCode: "你的密钥"
}
</script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
3.在components 中新建一个 map.vue 文件用作组件
4.在App.vue 文件中引入 map.vue 组件
App.vue 代码
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import Map from './components/map.vue'
</script>
<template>
<Map />
</template>
<style scoped>
</style>
5.因为默认的样式不是布满横屏的,所以我们需要改造一下 vue 默认的CSS文件 ,打开style.css 修改以下样式
style.css
#app {
width: 100%;
/* max-width: 1280px; */
/* max-width: 100%; */
/* margin: 0 auto; */
/* padding: 2rem; */
/* text-align: center;
padding: 0; */
}
至此我们的基础配置已经完成。
下一节,会在map.vue组件上进行开发讲解。