十分钟玩转 vue3+高德地图AMap+geosjon批量绘制Polygon地块数据展示【一、基础引入配置】

Fun_放

已于 2022-08-05 17:18:24 修改

阅读量1.9k

点赞数 1

分类专栏：高德地图API 文章标签： vue.js javascript 前端 ajax json

于 2022-08-05 17:09:35 首次发布

本文链接：https://blog.csdn.net/weixin_42074713/article/details/126162482

版权

高德地图API 专栏收录该内容

3 篇文章 5 订阅

订阅专栏

十分钟玩转 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组件上进行开发讲解。

Fun_放

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十分钟玩转 vue3+高德地图AMap+geosjon批量绘制Polygon地块数据展示【一、基础引入配置】

最近做项目的时候，由于最近天地图卡的起飞，无奈之下只好改用高德，虽然高德地图文档比较完善，但是多少还是有点坑。建议慢慢食用，能把这篇文章的研究好了，足以轻松在 vue3 中使用高德地图的各种API功能。此文章内容适用ts，使用js的同学请自行举一反三改造代码。.........
复制链接

扫一扫