Leaflet文档阅读笔记-Leaflet on Mobile笔记
生活随笔
收集整理的這篇文章主要介紹了
Leaflet文档阅读笔记-Leaflet on Mobile笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
?
CSS和HTML改如何設置
定位功能
?
CSS和HTML改如何設置
如下的設置：
body {padding: 0;margin: 0; } html, body, #map {height: 100%;width: 100vw; }這里還要設置禁止瀏覽器進行不必要的放縮
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />上面是官方的給出的，下面是本人個人的看法，css應該這么寫！
<style>html, body {height: 100%;margin: 0;}#map {width: 100%;height: 100%;}</style>這樣，整個屏幕都是地圖了
?
定位功能
我先把官方代碼貼上了吧
<!DOCTYPE html> <html> <head><title>Mobile tutorial - Leaflet</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /><link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/><script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script><style>html, body {height: 100%;margin: 0;}#map {width: 600px;height: 400px;}</style><style>body { padding: 0; margin: 0; } #map { height: 100%; width: 100vw; }</style> </head> <body><div id='map'></div><script>var map = L.map('map').fitWorld();L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {maxZoom: 18,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>, ' +'Imagery ? <a href="https://www.mapbox.com/">Mapbox</a>',id: 'mapbox.streets'}).addTo(map);function onLocationFound(e) {var radius = e.accuracy / 2;L.marker(e.latlng).addTo(map).bindPopup("You are within " + radius + " meters from this point").openPopup();L.circle(e.latlng, radius).addTo(map);}function onLocationError(e) {alert(e.message);}map.on('locationfound', onLocationFound);map.on('locationerror', onLocationError);map.locate({setView: true, maxZoom: 16}); </script></body> </html>從中可以知道，當定位成功后，會觸發locationFound這個信號，當有問題時會觸發locationerror信號！
通過onLocationFound的參數，就能獲得位置坐標！
總結
以上是生活随笔為你收集整理的Leaflet文档阅读笔记-Leaflet on Mobile笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 设计思路工作笔记-使用当天时间戳的差值读
- 下一篇： Qt笔记-Qt获取百度下拉推荐词