在 NativeScript-Vue 应用程序中使用 Mapbox 包含功能丰富的地图

Vue.js 最近很受欢迎，并证明是 Angular 和 React 的强大竞争对手。在移动开发框架方面，我们很幸运 NativeScript 允许我们使用 Vue.js 创建原生 Android 和 iOS 应用程序。大约一年前，我写了一个名为“在 NativeScript Angular 应用程序中使用 Mapbox” 的教程，演示了在使用 Angular 构建的应用程序中包含功能丰富的地图。

我们都是多面手，如果我们能用 NativeScript 和 Vue.js 实现同样的目标，那不是很好吗？

我们将了解如何在我们的 NativeScript 与 Vue.js 应用程序中包含 Mapbox（谷歌地图的强大竞争对手），使用干净高效的代码，可以轻松扩展。

虽然你可以在 NativeScript 中使用 Mapbox 做很多事情，但我们将专注于将它包含在我们的应用程序中，并包含一个或两个地图标记。下面动画图片展示了我们希望实现的目标示例。

Mapbox in a NativeScript-Vue Application

请注意，我们可以与标记和地图进行交互。

创建新的 NativeScript 与 Vue.js 项目

为了使这个项目简单易懂，我们将从头开始创建它，并逐步深入。假设您已经安装了 Vue CLI 和 NativeScript CLI，请执行以下操作

vue init nativescript-vue/vue-cli-template mapbox-project
cd mapbox-project
npm install
npm run watch:ios

上面的命令将创建一个名为 **mapbox-project** 的项目，安装 Vue.js 和 NativeScript 依赖项，并在 iOS 模拟器上使用热重载模拟它。如果您没有使用 iOS，请将命令切换到 Android，它将完成相同的事情。

项目创建完毕后，我们可以集成 Mapbox 插件。

包含用于 NativeScript 的 Mapbox UI 插件

Mapbox 是一项很棒的服务，可以免费使用，但您仍然需要一个帐户。如果您还没有 Mapbox 访问令牌，请通过 Mapbox 网站创建一个帐户，并将令牌保存起来。

接下来，我们需要下载用于 NativeScript 的 Mapbox 插件。在命令行中，执行以下操作

npm install nativescript-mapbox --save

上面的命令将安装插件，但这个插件与您在网上看到的其他大多数插件不同。Mapbox 插件是一个 UI 插件，这意味着必须采取某些步骤才能使其在 XML 标记中发挥作用。

打开项目的 **src/main.js** 文件，并包含以下行

Vue.registerElement("Mapbox", () => require("nativescript-mapbox").MapboxView)

现在，我们可以在 XML 标记中注册的任何组件中使用 Mapbox。

使用地图逻辑开发组件

因为我们试图保持简单，所以我们将使用我们新生成的项目附带的 **src/components/HelloWorld.vue** 组件。您可以随意创建新的组件，或将以下内容集成到您现有的项目中。

打开项目的 **src/components/HelloWorld.vue** 文件，并包含以下内容

<template></template>

<script>
    import * as utils from "utils/utils";
    export default {
        data () {
            return { };
        },
        methods: {
            onMapReady(args) {
                args.map.addMarkers([
                    {
                        lat: 37.7397,
                        lng: -121.4252,
                        title: "Tracy, CA",
                        subtitle: "Home of The Polyglot Developer!",
                        onCalloutTap: () => {
                            utils.openUrl("https://www.thepolyglotdeveloper.com");
                        }
                    }
                ]);
            }
        }
    };
</script>

<style scoped></style>

您会注意到上面的代码中我清除了 <template> 和 <style> 块。我们将首先关注 <script> 块，然后逐步扩展。

仅仅在地图上显示标记有点无聊，所以我们将在点击标记时打开一个网站。为此，我们需要导入 utils 模块。

使用 Mapbox 时，它在应用程序启动时不会立即准备好可用。相反，我们必须让它告诉我们何时准备好，因此有了 onMapReady 方法

onMapReady(args) {
    args.map.addMarkers([
        {
            lat: 37.7397,
            lng: -121.4252,
            title: "Tracy, CA",
            subtitle: "Home of The Polyglot Developer!",
            onCalloutTap: () => {
                utils.openUrl("https://www.thepolyglotdeveloper.com");
            }
        }
    ]);
}

地图准备好后，我们将在指定的经度和纬度添加一个标记，代表加州特雷西。我们将它提供一个匹配的标题，但是，标题可以是您想要的任何内容。

点击标记时，标题和副标题将显示。当消息显示时，如果我们点击消息，浏览器将打开我们的网站。

现在让我们看看 <template> 块

<template>
    <Page class="page">
        <ActionBar class="action-bar" title="Vue Mapbox Example"></ActionBar>
        <GridLayout>
                <Mapbox
                    accessToken="YOUR-ACCESS-TOKEN-HERE"
                    mapStyle="traffic_day"
                    latitude="37.7397"
                    longitude="-121.4252"
                    hideCompass="true"
                    zoomLevel="12"
                    showUserLocation="false"
                    disableZoom="false"
                    disableRotation="false"
                    disableScroll="false"
                    disableTilt="false"
                    @mapReady="onMapReady($event)">
                </Mapbox>
        </GridLayout>
    </Page>
</template>

还记得我们在 **src/main.js** 文件中创建的 Mapbox 引用吗？我们将其作为 UI 中的标记使用。根据插件文档，地图上可以使用许多不同的属性。但是，我们需要包含 accessToken 和 @mapReady 属性。没有有效的令牌，地图将无法加载，我们需要一个事件来告诉我们地图何时准备好。地图准备好后，我们的方法将被调用，并添加标记。

我们完成了很多事情，而且并不难，对吧？

结论

您刚刚了解了如何在使用 NativeScript 和 Vue.js JavaScript 框架构建的 Android 和 iOS 应用程序中包含 Mapbox。您可以使用 Mapbox 做很多事情，例如，您可以包含 geolocation 或添加 polylines，具体取决于您的应用程序需求。

如果您是 Angular 开发人员，请查看我的以前教程，它在设置方面非常相似。