![](/img/trans.png)
[英]AngularJs leaflet directive map not rendering correctly on mobile with ionic
[英]Leaflet map not rendering correctly
我一直在嘗試將傳單地圖添加到我的網頁,但是無法正確呈現。 加載頁面時,頁面僅顯示為灰色框,直到開始縮小后我才能看到任何內容。 我可能找不到我無法找到的基本東西。
我為新西蘭添加了很長的緯度坐標,但是沒有用,所以我改了順序為緯度,只要有人建議,那也不行。 我還添加了一個標記來測試顯示的位置,該標記應該在新西蘭惠靈頓,但它似乎顯示在海洋中的某個地方。 我也不確定我應該使用什么變焦,但是我嘗試了各種不同的數字,但是它看起來總是一樣的,直到我立即變焦到距離我的目標新西蘭都不遠的地方,什么都沒有。
JS:
// initialize the map on the "map" div with a given center and zoom
var mymap = L.map('mapContainer').setView([40.9006, 174.8860], 5);
var Esri_WorldGrayCanvas = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
maxZoom: 18
}).addTo(mymap);
var marker = L.marker([41.2784, 174.7767]).addTo(mymap)
.bindPopup('The Beehive Wellington, house of Parliament')
HTML:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<!--CSS STYLE SHEET REFERENCE-->
<link rel="stylesheet" href="ass
<!--SCRIPTS-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
<script type="text/javascript" src="https://cdn.emailjs.com/sdk/2.3.2/email.min.js"></script>
<script type="text/javascript">
(function() {
emailjs.init("user_6IJi6iUGTMBKBwowkfsSh");
})();
</script>
<script src="assets/js/sendEmail.js"></script>
<script type="text/javascript" src="assets/js/script.js"></script>
<!--START OF MAP-->
<div class="mymap col-lg-8 col-md-12 col-sm-12">
<!--START OF DROPDOWN-->
<div class="search-options">
<div class="dropdown">
<select class="select-box">
<option>North Island</option>
<option>South Island</option>
</select>
</div>
<div class="radio-buttons">
<form>
<input class="radio" type="radio" name="option" value="track" checked> Track<br>
<input class="radio" type="radio" name="option" value="Hut"> Hut<br>
<input class="radio" type="radio" name="option" value="Campsite"> Campsite<br>
</form>
</div>
</div>
<!--END OF DROPDOWN-->
<!--START OF LEAFLET MAP-->
<div id="mapContainer"></div>
<!--END OF LEAFLET MAP-->
</div>
我希望頁面渲染后能看到一張新西蘭的地圖,並在北島底部的惠靈頓上畫一個標記。 當它完成渲染時,它已經放大到最大了,我看不到任何東西,我必須縮小到遠方,但是在新西蘭附近就沒有了,惠靈頓的標記位於太平洋的頂部。
您在新西蘭和Wellington
使用錯誤的[lat, lng]
。
它應該是
var mymap = L.map('mapContainer').setView([-40.9006, 174.8860], 5);
var marker = L.marker([-41.2784, 174.7767]).addTo(mymap)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.