用vue写一个高德地图的网格图

好的，下面是一个简单的示例代码，使用 Vue 和高德地图 API 实现网格图：

1. 首先，安装高德地图 JS API 和 Vue：

<!-- 引入高德地图 JS API -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>

<!-- 引入 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 在 Vue 的 `mounted` 钩子函数中初始化地图，并创建网格图：

<template>
  <div id="map"></div>
</template>

<script>
export default {
  mounted() {
    // 初始化地图
    const map = new AMap.Map('map', {
      zoom: 11,
      center: [116.397428, 39.90923],
      resizeEnable: true
    })

    // 创建网格图层
    const gridLayer = new AMap.GridLayer()

    // 设置网格参数
    gridLayer.setGridSize(50, 50)
    gridLayer.setOpacity(0.5)
    gridLayer.setZIndex(100)

    // 将网格图层添加到地图
    gridLayer.setMap(map)
  }
}
</script>

这个示例创建了一个大小为 50x50 的网格图层，并将其添加到地图上。你可以根据需要调整网格的大小和透明度。

注意，你需要将 `YOUR_KEY` 替换为你自己的高德地图 API key。

希望这个示例对你有所帮助！