mapbox-developer-group · coffee-gh · Sep 20, 2019
diff --git a/Tutorials/add-points-pt-3.md b/Tutorials/add-points-pt-3.md
@@ -14,45 +14,44 @@ prependJs:
 contentType: tutorial
 ---
 
-This is the third and final part in a [tutorial series](https://www.mapbox.com/studio-manual/help/#add-points-to-a-map) that teaches you how to add points to a map using the Mapbox Studio dataset editor, the Mapbox Studio style editor, and Mapbox GL JS.
+这是 [tutorial series] (https://www.mapbox.com/studio-manual/help/#add-points-to-a-map) 的第三部分，也是最后一部分，它将教您如何使用 Mapbox Studio 数据集编辑器、Mapbox Studio 样式编辑器和 Mapbox GL JS.向地图添加点。
 
-*Part 3* focuses on using **Mapbox GL JS**, a JavaScript library, and will require you to write code. In this tutorial, you will learn how to:
-
-- Add a custom style to a Mapbox GL JS map
-- Add popups when a [marker](/help/glossary/marker/) is clicked
+*第3部分* 重点介绍如何使用 **Mapbox GL JS** ，一个 JavaScript 库，并需要您编写代码。在本教程中，您将学习如何：
+- 向 Mapbox GL JS 地图添加自定义样式
+- 点击 [marker](/help/glossary/marker/) 时添加弹窗
 
 {{
   <DemoIframe src="/help/demos/add-points-to-a-map/index.html" />
 }}
 
-## Getting started
+## 准备开始
 
-There are a few resources you will need to follow along with this guide:
+在本指南中，您需要遵循一些资源：
 
-- **The "Chicago Parks" custom style**. You will need a [style](/help/glossary/style) containing markers for 10 Chicago parks. You can learn how to create this style in [Add points to a web map, part 1: create a dataset](/help/tutorials/add-points-pt-1) and [Add points to a web map, part 2: create a style](/help/tutorials/add-points-pt-2).
-- **Development environment**. This guide requires writing code. See _Get ready to write code_ below for tips on how to get started.
+- **"芝加哥公园"的自定义样式**。你需要一个包含10个芝加哥公园标记点的 [style] (/help/glossary/style) 。您可以在 [Add points to a web map, part 1: create a dataset] (/help/tutorials/add-points-pt-1) 和 [Add points to a web map, part 2: create a style](/help/tutorials/add-points-pt-2) 中学习如何创建此样式。
+- **开发环境**。本指南需要编写代码。有关如何开始的提示，请参照下面的 _准备编写代码_ 。
 
-### Get ready to write code
+### 准备编写代码
 
-To create an interactive map with popups you will need to use [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/). This will require writing  code. First, you will need to get setup with a development environment to write HTML, CSS, and JavaScript. If you are new to writing code, you may want to explore a resource like [Codecademy](https://www.codecademy.com/) to learn more about how front-end development works before using Mapbox GL JS. Here's what you'll need to do:
+使用弹窗创建交互式地图，您需要使用 [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/) 。这需要编写代码。首先，您需要设置一个开发环境来编写HTML, CSS和JavaScript。如果您对编写代码还不熟悉，那么在使用 Mapbox GL J S之前，您可能需要研究 [Codecademy](https://www.codecademy.com/) 之类的资源，以了解有关前端开发如何工作的更多信息。你需要做的是：
 
-- Download a text editor (for example, [Sublime Text](https://www.sublimetext.com/) or [Atom](https://atom.io/)).
-- Familiarize yourself with JavaScript and front-end development concepts.
+- 下载文本编辑器（例如， [Sublime Text](https://www.sublimetext.com/) 或 [Atom](https://atom.io/)） 。
+- 熟悉 JavaScript 和前端开发理念。
 
-## Create an HTML file
+## 创建一个HTML 文件
 
-Create a new HTML file in your text editor to initialize a Mapbox GL JS map.
+在文本编辑器中创建新的 HTML 文件以初始化 Mapbox GL JS 地图。
 
-### Initialize your map
+### 初始化地图
 
-1. Open your text editor.
-1. Copy and paste the code below into your text editor to initialize your Mapbox GL JS map.
-1. Make sure `mapboxgl.accessToken` is set equal to your access token.
-    - You can find your access token on your [Access tokens page](https://www.mapbox.com/account/access-tokens/) when you sign into your [Mapbox Account](https://www.mapbox.com/account).
-1. Replace `your-style-URL-here` with your own style URL. [Need help finding your style URL?](/help/glossary/style-url/)
-1. Save your file as "index.html."
-1. Open the file in a browser.
-1. You should see a map displaying your data in the browser window.
+1. 打开你的文本编辑器。
+1. 将下面的代码复制并粘贴到文本编辑器中，以初始化您的 Mapbox GL JS 地图。
+1. 确保将 `mapboxgl.accessToken` 设置和您的 access token 一致。
+    - 当您登录到 [Mapbox Account] (https://www.mapbox.com/account) 时，您可以在 [Access tokens page](https://www.mapbox.com/account/access-tokens/) 上找到您的 access token。
+1. 用您自己的样式URL替换 `your-style-URL-here` 。[Need help finding your style URL?] (/help/glossary/style-url/) 
+1. 将您的文件另存为“index.html”。
+1. 在浏览器中打开此文件。
+1. 您应该可以在浏览器窗口中看到显示您的数据的地图。
 
 ```html
 <!DOCTYPE html>
@@ -93,21 +92,21 @@ Create a new HTML file in your text editor to initialize a Mapbox GL JS map.
 </html>
 ```
 
-## Add popups
+## 添加弹窗
 
-After you have successfully displayed your map, you will need to add a little more code to allow the user to interact with your markers. This code will include:
-  - [`queryRenderedFeatures`](https://www.mapbox.com/mapbox-gl-js/api/#map#queryrenderedfeatures): This Mapbox GL JS method will generate a list of all the points on your map and the feature properties associated with each.
-  - [`mapboxgl.Popup`](https://www.mapbox.com/mapbox-gl-js/api/#popup): This method is used to create popups that show certain feature properties. The `Popup` component has several different instance members that you can use to customize the popup elements. In this example, you will use:
-      - **`Popup.setLngLat()`:** Sets the geographical location of the popup's anchor.
-      - **`Popup.setHTML()`:** Sets the popup's content to the HTML provided as a string. The specified properties must match the name of the properties you would like to display in your popups. In the code below, the properties that will display are the `title` and `description` properties for each feature.
-      - **`Popup.addTo(map)`:** Adds the popup to a map.
-  - An event listener: This event listener will make sure that popups are only shown when the user clicks a marker.
+在您成功显示地图后，需要再添加一点代码，以允许用户与标记点进行交互。这些代码包括：
+  - [`queryrenderedfeatures`](https://www.mapbox.com/mapbox-gl-js/api/#map#queryrenderedfeatures) ：这个 Mapbox GL JS 方法将生成地图上所有点的列表以及与每个点相关联的特性属性。
+  - [`mapboxgl.Popup`](https://www.mapbox.com/mapbox-gl-js/api/#popup) ：此方法用于创建显示某些功能属性的弹窗。`Popup` 组件有几个不同的实例成员，您可以使用它们自定义 popup 元素。在本例中，您将使用：
+      - **`Popup.setLngLat()`:** 设置弹窗锚点的地理位置。
+      - **`Popup.setHTML()`:** 将弹窗的内容设置为以字符串形式提供的 HTML。指定的属性必须与要在弹窗中显示的属性的名称匹配。在下面的代码中，将显示的属性是每个功能的 `title` 和 `description` 属性。
+      - **`Popup.addTo(map)`:** 将弹窗添加到地图。
+- 事件监听器：此事件监听器将确保仅当用户点击标记点时才显示弹窗。
 
-### Add more code
+### 添加更多代码
 
-1. Copy and paste the code below into your HTML file after the code that initializes your map, but before the `</script>` tag.
-1. In the variable `features`, make sure you replace `layer-name-here` with the name of your layer as seen in the style editor. This is probably `chicago-parks` if you have been following the earlier tutorials in this series.
-1. Refresh your browser page. You will be able to click on the markers and see titles and descriptions displayed in the popups.
+1. 将下面的代码复制并粘贴到您的HTML文件中，在初始化地图的代码之后，但在 `</script>` 标签之前。
+1. 在变量 `features` 中，确保将 `layer-name-here` 替换为样式编辑器中显示的图层名称。如果您一直遵循本系列前面的教程，那么这里可能是 `chicago-parks` 。
+1. 刷新浏览器页面。您可以点击标记点并在弹窗中看到标题和描述。
 
 ```js
 map.on('click', function(e) {
@@ -128,14 +127,15 @@ map.on('click', function(e) {
 });
 ```
 
-## Final product
+## 最后成品
 
-You've made a map using the Mapbox Studio dataset editor, Mapbox Studio style editor, and Mapbox GL JS that incorporates custom data and styles and allows for user interaction.
+您已经使用 Mapbox Studio 数据集编辑器、Mapbox Studio 样式编辑器和 Mapbox GL JS 创建了一个地图，其中包含了自定义数据和样式，并允许用户交互。
 
 {{
   <DemoIframe src="/help/demos/add-points-to-a-map/index.html" />
 }}
 
-## Next steps
+## 下一步
+
+要了解有关 Mapbox Studio 的更多操作，请浏览 [Mapbox Studio manual](https://www.mapbox.com/studio-manual/) 。有关 Mapbox GL JS 及其工作原理的更多信息，读我们的 [Mapbox web applications work](/help/how-mapbox-works/web-apps/) 指南。
 
-To learn about more things you can do with Mapbox Studio, explore the [Mapbox Studio manual](https://www.mapbox.com/studio-manual/). For more information on Mapbox GL JS and how it works, read our guide on how [Mapbox web applications work](/help/how-mapbox-works/web-apps/).