十分钟玩转 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=",#ff2dc6,1" false-label=",#ff2dc6,0" label="" size="large" /></li><li><span></span> <el-checkbox v-model="checked1" @change="GetMassif" true-label=",#1549cf,1" false-label=",#1549cf,0" label="" size="large" /></li><li><span></span> <el-checkbox v-model="checked1" @change="GetMassif" true-label=",#e14915,1" false-label=",#e14915,0" label="" 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.15plugins:[ //以下为使用到的JSAPI插件，可以在官方文档中根据自己用到的功能来添加。"AMap.Scale", //工具条，控制地图的缩放、平移等"AMap.ToolBar", //比例尺，显示当前地图中心的比例尺// "AMap.Geolocation", //定位，提供了获取用户当前准确位置、所在城市的方法"AMap.HawkEye", //鹰眼，显示缩略图"AMap.GeoJSON", //GeoJSON"AMap.convertFrom", //坐标系转换], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap)=>{amap = AMapmap = new AMap.Map("container",{//设置地图容器idviewMode:"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写文章，希望能帮到大家。
如果觉得有用请给我点个赞。
