vue 基于高德地图怎么使用省级地图

要在 Vue 中使用高德地图，并显示省级地图，可以按照以下步骤进行操作：

1. 在 index.html 中引入高德地图 JS API：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2. 在 Vue 组件中创建地图：

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

<script>
export default {
  mounted() {
    // 创建地图
    const map = new AMap.Map('map-container', {
      zoom: 6, // 地图缩放级别
      center: [116.397428, 39.90923] // 地图中心点坐标
    });

    // 设置地图显示省级行政区划
    AMap.service('AMap.DistrictSearch', () => {
      const districtSearch = new AMap.DistrictSearch({
        level: 'province',
        showbiz: false,
        extensions: 'all'
      });

      districtSearch.search('北京市', (status, result) => {
        const bounds = result.districtList[0].boundaries;
        const polygon = new AMap.Polygon({
          map: map,
          strokeWeight: 1,
          strokeColor: '#0091ea',
          fillColor: '#80d8ff',
          fillOpacity: 0.2,
          path: bounds
        });
        map.setFitView();
      });
    });
  }
};
</script>

在这个例子中，我们创建了一个 `div` 容器用于显示地图，然后在组件的 `mounted` 钩子中创建了一个地图对象，并将其显示在容器中。接下来，我们使用 `AMap.service` 方法加载 `AMap.DistrictSearch` 类，并调用 `search` 方法搜索指定的省份。搜索结果会返回一个省份的多边形边界集合，我们可以使用 `AMap.Polygon` 类创建一个多边形覆盖物，并将其添加到地图上。

最后，我们调用 `map.setFitView()` 方法将地图缩放到合适的级别，以便显示整个省份。