vue中使用高德瓦片地图，并展示山东

要在Vue中使用高德地图，需要先引入高德地图的JavaScript API，并在Vue组件中创建地图实例。

以下是一个使用Vue和高德地图API展示山东地图的示例：

1. 引入高德地图API

在Vue组件的`<template>`标签中添加一个`<div>`元素，用于容纳地图。

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

在`<script>`标签中引入高德地图API的JavaScript文件。

<script src="//webapi.amap.com/maps?v=1.4.15&key=yourKey"></script>

其中，`yourKey`需要替换成你自己的高德地图API Key。

2. 创建地图实例

在Vue组件的`<script>`标签中，使用`mounted`生命周期钩子函数，创建地图实例。

export default {
  name: 'Map',
  mounted() {
    // 创建地图实例
    const map = new AMap.Map('map', {
      center: [118.527663, 36.09929], // 山东省的中心坐标
      zoom: 8 // 地图缩放级别
    })
  }
}

其中，`center`属性设置为山东省的中心坐标，`zoom`属性设置为地图的缩放级别。

3. 添加地图图层

在地图实例创建后，可以添加地图图层来展示不同的地图数据。例如，可以添加高德地图的瓦片图层来展示山东省的地图。

export default {
  name: 'Map',
  mounted() {
    // 创建地图实例
    const map = new AMap.Map('map', {
      center: [118.527663, 36.09929], // 山东省的中心坐标
      zoom: 8 // 地图缩放级别
    })

    // 添加高德地图瓦片图层
    const tileLayer = new AMap.TileLayer({
      zooms: [3, 18], // 支持的缩放级别范围
      visible: true, // 是否可见
      opacity: 1, // 图层透明度
      zIndex: 0 // 图层层级
    })
    tileLayer.setMap(map)
  }
}

这样，在Vue组件中就可以展示高德地图，并显示山东省的地图。