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

<script>
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';
export default {
? ? name: "MapContainer",
?? ?methods:{
?? ??? ?createMap(){
?? ??? ??? ?let map = new Map({
?? ??? ??? ??? ?layers: [new TileLayer({
?? ??? ??? ??? ??? ?source: new OSM(),
?? ??? ??? ??? ?}) ],
?? ??? ??? ??? ?target: 'map',
?? ??? ??? ??? ?view: new View({
?? ??? ??? ??? ??? ?maxZoom: 18,
?? ??? ??? ??? ??? ?center: fromLonLat([108.92,34.28]),
?? ??? ??? ??? ??? ?zoom: 10,
?? ??? ??? ??? ?}),
?? ??? ??? ?});
?? ??? ?}
?? ?},
?? ?mounted(){
?? ??? ?this.createMap()
?? ?}
};
</script>

<style scoped>
.map {
? ? height: 100%;
? ? margin: 0;
? ? padding: 0;
? ? overflow: hidden;
? ? position: relative;
?? ?background: #1f3064;
}
</style>

在home.vue中引入地圖組件

<template>
? <div class="home">
? ? <MapContainer msg="Welcome to Your Vue.js App"/>
? </div>
</template>

<script>
import MapContainer from '@/components/MapContainer.vue'
export default {
? name: 'Home',
? components: {
? ? MapContainer
? }
}
</script>
<style>
.home{
?? ?height: 100%;
?? ?position: relative;
}
</style>

頁(yè)面截圖如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解vuex之store源碼簡(jiǎn)單解析
這篇文章主要介紹了詳解vuex之store源碼簡(jiǎn)單解析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
如何使用 vue + d3 畫(huà)一棵樹(shù)
這篇文章主要介紹了如何使用 vue + d3 畫(huà)一棵樹(shù),本文通過(guò)文字說(shuō)明加代碼分析的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-12-12
vue動(dòng)態(tài)刪除從數(shù)據(jù)庫(kù)倒入列表的某一條方法
今天小編就為大家分享一篇vue動(dòng)態(tài)刪除從數(shù)據(jù)庫(kù)倒入列表的某一條方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue如何預(yù)覽后端傳來(lái)的二進(jìn)制圖片
這篇文章主要介紹了vue如何預(yù)覽后端傳來(lái)的二進(jìn)制圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue3+ts深入組件Props實(shí)例詳解
Props是組件之間進(jìn)行數(shù)據(jù)傳遞的一種方式，可以將數(shù)據(jù)從父組件傳遞給子組件，這篇文章主要介紹了vue3+ts深入組件Props的實(shí)例詳解,需要的朋友可以參考下
2023-09-09
vue項(xiàng)目中js-cookie的使用存儲(chǔ)token操作
這篇文章主要介紹了vue項(xiàng)目中js-cookie的使用存儲(chǔ)token操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁(yè)功能
這篇文章主要介紹了Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁(yè)功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
解決vue中reader.onload讀取文件的異步問(wèn)題
這篇文章主要介紹了解決vue中reader.onload讀取文件的異步問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue 使用 sortable 實(shí)現(xiàn) el-table 拖拽排序功能
這篇文章主要介紹了vue 使用 sortable 實(shí)現(xiàn) el-table 拖拽排序功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-12-12
Vue.js 2.0 移動(dòng)端拍照壓縮圖片上傳預(yù)覽功能
這篇文章主要介紹了Vue.js 2.0 移動(dòng)端拍照壓縮圖片上傳預(yù)覽功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03