web前端外包项目中，一开始是使用的uniapp的map组件，但是map组件不支持网格点击事件，所以改为了使用高德地图插件渲染地图，要求点击网格区域显示网格信息，这里的开发环境是使用了uniapp，所以将实现过程记录一下。

安装依赖

地图使用的是vue-amap组件，需要安装一下vue-amap

cnpm i vue-amap --save

文档地址

之前没有使用过的话，为了方便查看文档，这里将文档地址也写上了。
文档地址

main.js引用

main.js引入高德地图插件，地图中需要的key可以登录高德开发平台去申请

import VueAMap from 'vue-amap';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
	key: configs.AmapId,
	plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'],
	v: '1.4.4'
});

使用

<template>
	<view class="content">
		<u-navbar title="网格地图" backUrl="/pages/home/home" :placeholder="true" :safeAreaInsetTop="true" :autoBack="true">
		</u-navbar>
		<el-amap v-if="show" class="allmap" vid="amap" :zoom="zoom" :center="center">
			<el-amap-polygon v-for="(polygon, index) in polygons" :key="index" :vid="index" :ref="`polygon_${index}`"
				:path="polygon.path" editable="true" strokeStyle="dashed" strokeColor="#FF0000" strokeWeight="2"
				strokeOpacity="0.8" fillOpacity="0.3" fillColor="#1791fc" :events="events"></el-amap-polygon>
		</el-amap>
		<div class="footer" v-if="show2">
			<div class="footerTop">
				<div class="footerTopl">
					{{list[index].gridName}}：
				</div>
			</div>
			<div class="footerBottom">
				<div class="footerBottom1"><text class="name">统计出租屋数量：</text> <text
						class="num">{{data.rentalCount}}</text></div>
				<div class="footerBottom1"><text class="name">统计网格员数量：</text> <text
						class="num">{{data.gridUserCount}}</text></div>
				<div class="footerBottom1"><text class="name">统计房屋数量：</text> <text
						class="num">{{data.houseCount}}</text></div>
				<div class="footerBottom1"><text class="name">统计人口数量：</text> <text
						class="num">{{data.personCount}}</text></div>
			</div>
		</div>
	</view>
</template>

<script>
	import icon1 from '@/static/workbench/icon_dingwe.png'
	import {
		getUserGridList,
		getUserGridInfo
	} from "@/config/api.js"
	import configs from '@/config/config.js'
	import {
		getIsLogin
	} from '@/utils/util.js'
	export default {
		components: {},
		data() {
			return {
				center: [],
				show: false,
				show2: false,
				zoom: 14,
				index: 0,
				data: {
					"gridUserCount": 0, //统计网格员数量
					"houseCount": 0, //统计房屋数量
					"personCount": 0, //统计人口数量
					"rentalCount": 0 //统计出租屋数量
				},
				events: {
					init: (m) => {
						m.on('click', (m) => {
							console.log(m)
							this.index = m.target.w.vid
							this.show2 = true
						})
					}
				},
				polygons: [],
			}
		},
		onLoad() {
			this.getdata()
		},
		onShow() {
			getIsLogin()
		},
		computed: {},
		methods: {
			logout() {
				uni.clearStorageSync()
				uni.redirectTo({
					url: '/pages/login/index'
				})
			},
			getdata() {
				var that = this;
				that.list = []
				that.show = false
				getUserGridList({
					sign: '',
					body: {
						gridId: uni.getStorageSync('gridId'),
						gridUserId: uni.getStorageSync('gridUserId')
					}
				}, {}).then(res => {
					if (res.body.code == 200) {
						that.list = res.body.data
						that.polygons = []
						that.list.forEach((type) => {
							var pathData = {
								path: []
							}
							type.gridPoitList.forEach((type2) => {
								var datas = []
								datas.push(type2.lon)
								datas.push(type2.lat)
								pathData.path.push(datas)
							});
							that.polygons.push(pathData)
						});
						that.center = that.polygons[0].path[0]
						that.show = true
						console.log(that.polygons)
						console.log(that.center)
					}
				}).catch(err => {

				})
			},
			getUserGridInfo() {
				var that = this;
				that.list = []
				getUserGridInfo({
					sign: '',
					body: {
						gridId: uni.getStorageSync('gridId'),
						gridUserId: uni.getStorageSync('gridUserId')
					}
				}, {}).then(res => {
					that.loading = false
					that.status = 'loadmore'
					if (res.body.code == 200) {
						that.list = res.body.data
					}
				}).catch(err => {

				})
			},
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		position: fixed;
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.content {
		width: 750rpx;
		margin: 0 auto;
	}

	.footer {
		width: 100%;
		height: 330rpx;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 20rpx -6rpx #D2E1FF;
		position: fixed;
		z-index: 10;
		bottom: 0;

		.footerTop {
			width: 100%;
			height: 110rpx;
			border-bottom: 1rpx solid #f3f3f3;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			.footerTopl {
				margin-left: 30rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				align-content: flex-start;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
			}

			.footerTopr {
				margin-right: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #E7461E;
			}
		}
	}

	.allmap {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.footerBottom {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: flex-start;
		padding-top: 20rpx;

		.footerBottom1 {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			width: 48%;
			height: 80rpx;

			.name {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-left: 30rpx;
			}

			.num {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #E7461E;
				margin-left: 30rpx;
			}
		}
	}
</style>