Vue2- 리플릿 LMap / LTileLayer가 올바르게 렌더링되지 않음
렉스 브랜디
현재 Vue2 학습 프로젝트에지도를 추가하려고합니다. Google지도를보고 OSM과 Leaflet이 가장 좋은 방법이라고 결정했습니다. 하지만 초기 문제에 부딪 쳤고 현재지도가 파란색 사각형으로 렌더링되고 있습니다.
이것이 현재 내지도의 모습입니다.
다음은 Vue 구성 요소입니다. 둘 다 동일한 것을 표시 url하고 url2있지만 이것이 액세스 토큰에 문제가 있는지 또는 OSM에 잘못된 URL을 사용하고 있는지 확실하지 않습니다.
<template>
<v-container>
<h1>Hello</h1>
<l-map :zoom="zoom" :center="center" style="height: 500px; width: 100%">
<l-tile-layer :url="url" :attribution="attribution"/>
</l-map>
</v-container>
</template>
<script>
import { LMap, LTileLayer } from 'vue2-leaflet';
export default {
data() {
return {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
url2: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
// eslint-disable-line
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
center: [33.8688, 151.2093],
zoom: 12,
};
},
components: {
LMap,
LTileLayer,
},
};
</script>
ghybs
지정한 좌표 ([33.8688, 151.2093])가 일본에서 떨어진 태평양 길을 가리키는 점을 감안할 때 예상되는 동작으로 보입니다.
https://www.openstreetmap.org/#map=4/33.60/151.31
높은 초기 확대 / 축소 (12)를 지정 했으므로 주위를 이동하면 여전히 푸른 바다 타일이 표시됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
Angular 2-Kendo UI 캘린더가 올바르게 렌더링되지 않음
- 2
yii2 mpdf pdf가 올바르게 렌더링되지 않음
- 3
IE에서 SVG가 올바르게 렌더링되지 않음
- 4
패널의 자리 표시 자에 삽입 된 이미지가 올바르게 렌더링되지 않음
- 5
텍스트가 올바르게 렌더링되지 않음-FreeType2를 사용하는 OpenGL
- 6
SceneView가 올바르게 렌더링되지 않는 이유
- 7
SVG가 올바르게 렌더링되지 않습니다.
- 8
AutoCompleteBox가 올바르게 렌더링되지 않습니다.
- 9
BootsFaces selectMultiMenu가 올바르게 렌더링되지 않습니다.
- 10
Crystal Reports가 올바르게 렌더링되지 않습니다.
- 11
Django에서 배경 이미지가 올바르게 렌더링되지 않음
- 12
비트 맵 이미지가 올바르게 렌더링되지 않음
- 13
비트 맵 이미지가 올바르게 렌더링되지 않음
- 14
Heroku Rails 6 앱에서 Code Mirror가 올바르게 렌더링되지 않음
- 15
Vaadin + Polymer 구성 요소가 올바르게 렌더링되지 않음
- 16
htmlspecialchars가 브라우저에서 올바르게 렌더링되지 않음
- 17
CALayer.contents가 AVMutableComposition에서 올바르게 렌더링되지 않음
- 18
Google Web Fonts 글꼴 두께가 올바르게 렌더링되지 않음
- 19
jqPlot 원형 차트가 올바르게 렌더링되지 않음
- 20
PictureBox.Invalidate가 올바르게 다시 렌더링되지 않음
- 21
PictureBox.Invalidate가 올바르게 다시 렌더링되지 않음
- 22
Kendo UI Flatcolorpicker가 Kendo UI 창에서 올바르게 렌더링되지 않음
- 23
Urxvt의 Neovim 색 구성표가 올바르게 렌더링되지 않음
- 24
Wordpress 위젯의 Twitter HTML 코드가 올바르게 렌더링되지 않음
- 25
Outlook 2010에서 HTML 코드가 올바르게 렌더링되지 않음
- 26
ThreeJS 텍스처가 평면에서 올바르게 렌더링되지 않음
- 27
jekyll 템플릿이 github 페이지에서 올바르게 렌더링되지 않음
- 28
폴리머 2 : 구성 요소가 렌더링되지 않음
- 29
작업 결과에서 뷰가 반환 될 때 Select2 스크립트가 올바르게 렌더링되지 않음
몇 마디 만하겠습니다