Skip to content

Commit

Permalink
对 Leaflet on Mobile 内的文档进行二次校正
Browse files Browse the repository at this point in the history
  • Loading branch information
NICEXAI committed Sep 25, 2021
1 parent d90ea1d commit 9b7ec79
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 13 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
- [x] 概况(已校正)
- [x] 教程
- [x] 列表页(已校正)
- [x] Leaflet 快速入门指南
- [x] Leaflet 在手机上使用
- [x] Leaflet 快速入门指南(已校正)
- [x] Leaflet 在手机上使用(已校正)
- [x] Markers 自定义图标
- [x] 在 Leaflet 中使用 GeoJSON
- [x] 互动式choropleth地图
Expand Down
22 changes: 11 additions & 11 deletions examples/mobile/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ layout: tutorial_v2
title: Leaflet on Mobile
---

## Leaflet 在手机上使用
## 在移动端使用 Leaflet

在此示例中,您将学习如何创建针对 iPhone、iPad 或 Android 手机等移动设备调整的全屏地图,以及如何轻松检测和使用当前用户位置
在本教程中,你将学习如何为 iPhone、iPad 或 Android 手机等移动设备创建一个全屏地图,以及如何轻松检测和使用当前的用户位置

{% include frame.html url="example.html" %}

### Preparing the page
### 准备一个页面

首先,我们将看看页面的 HTML 和 CSS 代码。为了让我们的地图 `div` 元素拉伸到所有可用空间(全屏),我们可以使用下面的 CSS 代码(注意:在这个例子中,我们使用百分比作为高度。虽然 vh 可以说更好,但是在移动设备上的谷歌浏览器存在问题。) :
首先,我们来看一下页面的 HTML 和 CSS 代码。为了让我们的地图 `div` 元素拉伸到所有可用空间(全屏),我们可以使用下面的 CSS 代码(注意:在这个例子中,我们使用百分比作为高度。虽然 vh 可以说更好,但是在移动设备上的谷歌浏览器存在问题。) :

{: .css}
body {
Expand All @@ -23,13 +23,13 @@ title: Leaflet on Mobile
width: 100vw;
}

此外,我们需要通过在`head`部分或我们的 HTML 页面中放置以下内容来告诉移动浏览器禁用不需要的页面缩放并将其设置为实际大小
此外,我们需要通过在 `head` 部分或我们的 HTML 页面中放置以下内容来告诉移动浏览器禁用页面缩放并将其设置为实际大小

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

### 初始化地图

我们现在将在 JavaScript 代码中初始化地图,就像我们在[快速入门指南](../quick-start/)中所做的那样,显示整个世界
我们现在将在 JavaScript 代码中初始化地图,就像我们在[快速入门指南](../quick-start/)中所做的那样,显示整个世界地图

<pre><code class="javascript">var map = L.map('map').fitWorld();

Expand All @@ -42,11 +42,11 @@ L.tileLayer('https://api.mapbox.com/styles/v1/{<a href="https://docs.mapbox.com/

### 地理位置

Leaflet有一个非常方便的快捷方式来放大地图视图到检测到的位置---`locate`方法加上`setView`选项,取代了代码中通常的`setView`方法。
Leaflet 有一个非常方便的快捷方式来放大地图视图到检测到的位置---`locate` 方法加上 `setView` 选项,取代了代码中通常的 `setView` 方法。

map.locate({setView: true, maxZoom: 16});

这里我们指定16作为自动设置地图视图时的最大缩放值。只要用户同意分享其位置,并且被浏览器检测到,地图就会将视图设置为它。现在我们有了一个可以工作的全屏移动地图 但是,如果我们需要在地理定位完成后做一些事情呢?这就是 `locationfound``locationerror` 事件的作用。例如,让我们在检测到的位置上添加一个标记,在弹出式窗口中显示精确度,在 `locateAndSetView` 调用之前给 `locationfound`事件添加一个事件监听器。
这里我们指定 16 作为自动设置地图视图时的最大缩放值。只要用户同意分享其位置,并且被浏览器检测到,地图就会将视图设置为它。现在我们有了一个可以工作的全屏移动地图 但是,如果我们需要在地理定位完成后做一些事情呢?这就是 `locationfound``locationerror` 事件的作用。例如,让我们在检测到的位置上添加一个标记,在弹出式窗口中显示精确度,在 `locateAndSetView` 调用之前给 `locationfound`事件添加一个事件监听器。

function onLocationFound(e) {
var radius = e.accuracy;
Expand All @@ -67,8 +67,8 @@ Leaflet有一个非常方便的快捷方式来放大地图视图到检测到的

map.on('locationerror', onLocationError);

如果你把`setView`选项设置为 "true",并且地理定位失败,它将把视图设置为整个世界。
如果你把 `setView` 选项设置为 "true",并且地理定位失败,它将把视图设置为整个世界。

现在,这个例子已经完成了---在你的手机上试试吧。[查看完整的例子&rarr;](example.html)
现在,这个例子已经完成了---在你的手机上试试吧。[查看完整的示例&rarr;](example.html)

下一步是看看详细的[文档](/reference.html)和浏览[其他例子](../../examples.html)
下一步可以查看详细的[文档](/reference.html)和浏览[其它示例](../../examples.html)

0 comments on commit 9b7ec79

Please sign in to comment.