Vue2+OpenLayers初始化高德地图

目录

一、案例截图

二、完整代码

一、案例截图

二、完整代码

一键复制即可运行：

<template><div id="map-container"></div>
</template>
<script>
import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { get } from 'ol/proj';
import 'ol/ol.css';
import {XYZ} from "ol/source";
import { defaults as defaultControls} from 'ol/control';export const projection = get("EPSG:4326");export default {data() {return {map:null,}},mounted(){this.initMap()},methods:{// 初始化地图initMap() {this.map = new Map({layers: [new TileLayer({visible: true,source: new XYZ({visible: true,url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8',})})],target: 'map-container',view: new View({center: [118.76300000, 32.06070000],zoom:12,maxZoom: 18,projection: projection,}),//加载控件到地图容器中controls: defaultControls({zoom: false,rotate: false,attribution: false})});}}
}
</script>
<style scoped>
#map-container {width: 100%;height: 100vh;
}
</style>