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

</template>
<script>

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';



export default {
  name: "Index",
  data() {
    return {

    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    initMap() {
      // 创建地图实例
      this.map = new Map({
        target: 'map', // 对应页面上的div的id
        layers: [ // 添加图层
          new TileLayer({
            source: new XYZ({
              url:'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
              //'http://wprd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8'
            })
          }),
        ],
        view: new View({ // 定义视图
          center: [0, 0], // 地图中心坐标
          zoom: 2, // 缩放级别
        }),
      });
    }
  },
  mounted() {
    this.initMap();
  },
  created(){
    this.initMap();
  }
};
</script>

<style scoped lang="scss">
  .map{
    width: 1000px;
    height: 800px;
  }
</style>

