十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示【二、创建地图】
在template标签内创建下列DOM
1、在template标签内，创建container的DOM 用于展示高德地图
2、创建一个div（state-text）用于展示当前鼠标所在的坐标信息
3、创建一个div（console）用于展示不同地块信息
上诉三步做完之后就会得到一个展示地图的容器，一个显示地图信息的展示板，以及一个用于控制展示信息的操作面板；
template 标签部分的完整代码
<template>
<!--container-->
<div id="container"></div>
<!--用于展示坐标文字信息-->
<div class="state-text" >{
{texta}}</div>
<!--控制台面板，用于控制显示不同地块信息-->
<div class="Console">
<h5>控制台</h5>
<hr>
<div class="Console_list">
<ul>
<li><span></span> <el-checkbox v-model="checked1" @change="GetMassif" true-label="2022,#ff2dc6,1" false-label="2022,#ff2dc6,0" label="2022年" size="large" /></li>
<li><span></span> <el-checkbox v-model="checked1" @change="GetMassif" true-label="2021,#1549cf,1" false-label="2021,#1549cf,0" label="2021年" size="large" /></li>
<li><span></span> <el-checkbox v-model="checked1" @change="GetMassif" true-label="2020,#e14915,1" false-label="2020,#e14915,0" label="2020年" size="large" /></li>
</ul>
</div>
</div>
</template>
<style scoped>
#container{
padding:0px;
margin: 0px;
width: 100%;
height: 100vh;
}
.state-text{
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border-radius: 0.25rem;
position: fixed;
top: 1rem;
background-color: white;
width: auto;
min-width: 22rem;
border-width: 0;
right: 1rem;
box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
}
.Console {
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border-radius: 0.25rem;
position: fixed;
top: calc( 1rem + 4rem);
background-color: white;
width: auto;
min-width: 11rem;
border-width: 0;
right: 1rem;
box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
}
.Console_list li{
list-style: none;
line-height: 28px;
}
.Console_list li:nth-child(1) span {
display: inline-block;
width: 12px;
height: 12px;
background-color: #ff2dc6;
}
.Console_list li:nth-child(2) span{
display: inline-block;
width: 12px;
height: 12px;
background-color: #1549cf;
}
.Console_list li:nth-child(3) span {
display: inline-block;
width: 12px;
height: 12px;
background-color: #e14915;
}
</style>
接下来开始进入重点的部分，首先我们在 script 标签内引入所需要的组件
注：本文讲解的内容仅适用 ts 方式，如果写传统的 js 请自行改造代码
代码如下：
<script setup lang='ts'>
import {
onMounted, reactive, ref } from 'vue';
import {
ElCheckbox} from "element-plus"
import {
shallowRef } from '@vue/reactivity'
import AMapLoader from '@amap/amap-jsapi-loader';
import axios from 'axios';
// 上述内容不做注释
onMounted(() => {
initMap() //调用地图
})
var amap = (null);//定义一个amap，可以根据自己习惯取名
var texta = ref()
//加载地图
const initMap = () => {
AMapLoader.load({
key:"你的高德地图KEY", // 申请好的Web端开发者Key，首次调用 load 时必填
version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins:[ //以下为使用到的JSAPI插件，可以在官方文档中根据自己用到的功能来添加。
"AMap.Scale", //工具条，控制地图的缩放、平移等
"AMap.ToolBar", //比例尺，显示当前地图中心的比例尺
// "AMap.Geolocation", //定位，提供了获取用户当前准确位置、所在城市的方法
"AMap.HawkEye", //鹰眼，显示缩略图
"AMap.GeoJSON", //GeoJSON
"AMap.convertFrom", //坐标系转换
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap)=>{
amap = AMap
map = new AMap.Map("container",{
//设置地图容器id
viewMode:"2D", //是否为3D地图模式
zooms:[6,16.7], //地图最小和最大的级别
zoom:15, //初始化地图级别
center:[109.314545,23.964934], //初始化地图中心点位置
mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
layers: [//加载图层
new AMap.TileLayer.Satellite(), //卫星地图
new AMap.TileLayer.RoadNet({
//道路
opacity:0.5 //透明度
}),
],//地图图层
});
//异步同时加载多个控件
map.addControl(new AMap.Scale()); //放大缩小控件
map.addControl(new AMap.ToolBar()); //异步同时加载工具条控件
// 放大镜控件
let HawkEye = new AMap.HawkEye({
position: "LT", //控件停靠位置（LT/RT/LB/RB）
});
map.addControl(HawkEye);
map.on('mousemove',showInfoMove)// 绑定鼠标移动事件
}).catch(e=>{
console.log(e);
})
}
//移动鼠标事件
const showInfoMove = (e) =>{
texta.value = '当前经纬度：'+e.lnglat.getLng()+','+e.lnglat.getLat()
}
</script>
至此，你已经完成，地图加载出来，并且能够实时获取鼠标所在坐标的功能；
下一章节，实战如何将geojson数据在地图上批量添加地块数据；
第一次在CSDN写文章，希望能帮到大家。
如果觉得有用请给我点个赞。