vue.js 和后台交互

vue.js 和后台交互

Interactive maps are good for displaying geographic information. But we can also use them to get location data from users. This comes in handy if we are building location-based applications and we want an alternative to address text fields.

交互式地图非常适合显示地理信息。 但是我们也可以使用它们从用户那里获取位置数据。 如果我们正在构建基于位置的应用程序，并且希望找到一种替代方法来解决文本字段，这将很方便。

Here is a demo of what we will be building in this article:

这是我们将在本文中构建的演示：

Our Location selector will be able to do the following:

我们的位置选择器将能够执行以下操作：

Initially, it starts off at the user's current location, if location tracking is allowed and supported by the browser. If not, it will be centered at a default location.

最初，如果浏览器允许并支持位置跟踪，则从用户当前位置开始。 如果没有，它将以默认位置为中心。 Double tapping(clicking) will place a marker on that spot and that will be the selected location.

双击(单击)将在该点上放置一个标记，该标记将成为所选位置。 We can update the selected location by dragging and placing the marker to a new location.

我们可以通过将标记拖放到新位置来更新所选位置。 We’ll also be able to search for a location using the Geosearch tool on the top left of the map.

我们还可以使用地图左上方的Geosearch工具搜索位置。

Okay! Let's start by initializing a new Vue.js application using the Vue CLI.

好的！ 让我们首先使用Vue CLI初始化一个新的Vue.js应用程序。

vue create location-selector

We also need to add Leaflet to our project. We add the main Leaflet library along with vue2-leaflet, which will make it much easier to work with Leaflet on our Vue application.

我们还需要将Leaflet添加到我们的项目中。 我们添加了主要的Leaflet库以及vue2-leaflet ，这将使在我们的Vue应用程序上使用Leaflet更加容易。

yarn add leaflet vue2-leaflet

We’ll also add the vue2-leaflet-geosearch plugin, to enable search

我们还将添加vue2-leaflet-geosearch插件，以启用搜索

yarn add vue2-leaflet-geosearch leaflet-geosearch

When that is done, start the application on development mode

完成后，以开发模式启动应用程序

yarn serve

Before we start working on the selector, we need to take care of something. vue2-leaflet and leaflet-geosearch require their own CSS styles to display properly on the browser, so we need to add them. Go to main.js and add the following lines of code:

在开始使用选择器之前，我们需要注意一些事项。 vue2-leaflet和leaflet-geosearch需要它们自己CSS样式才能在浏览器上正确显示，因此我们需要添加它们。 转到main.js并添加以下代码行：

import "leaflet/dist/leaflet.css";import "leaflet-geosearch/dist/geosearch.css";

Now, create a new file named LocationSelectorMap.vue in the components folder. We need to import some components from vue2-leaflet and add them to our template.

现在，在components文件夹中创建一个名为LocationSelectorMap.vue的新文件。 我们需要从vue2-leaflet导入一些组件并将它们添加到我们的模板中。

You should now see something like this

您现在应该看到类似这样的内容

The map starts off at a distance, but we want it to zoom in on our current location. Let's fix that.

该地图从一定距离开始，但我们希望它放大当前位置。 让我们修复它。

We need to give it an initial zoom value and locate the user’s current location. To get the user’s location, we’ll use the Geolocation API. Because the API requires user permission and might not be supported by the browser, we need a fallback location. If we fail to get the location, we will default to our fallback.

我们需要给它一个初始缩放值并找到用户的当前位置。 要获取用户的位置，我们将使用Geolocation API。 由于API需要用户许可，而浏览器可能不支持，因此我们需要一个后备位置。 如果无法获取位置，则默认为后备。

The getUserPosition method calls the Geolocation API and sets the user’s coordinates to the userLocation variable. We also have a defaultLocation prop which is our fallback. We use both to set the map’s center value.

getUserPosition方法调用Geolocation API，并将用户的坐标设置为userLocation变量。 我们还有一个defaultLocation道具，这是我们的后备。 我们都使用这两者来设置地图的中心值。

Now our map looks much better.

现在我们的地图看起来好多了。

Next, we need to be able to select a location on the map and place a marker on it. To do that we import the LMarker and LTooltip components from vue2-leaflet and add them to our map. We also need to handle dblclick events on our map, so we can place a marker there.

接下来，我们需要能够在地图上选择一个位置并在其上放置标记。 为此，我们从vue2-leaflet导入LMarker和LTooltip组件，并将它们添加到我们的地图中。 我们还需要在地图上处理dblclick事件，因此可以在此处放置标记。

We use the sync modifier on the lat-lng property of the marker, which syncs our position variable with the current position of the marker.

我们在标记的lat-lng属性上使用sync修饰符，该修饰符将我们的position变量与标记的当前位置同步。

A tooltip will display information on our current location. It gets the content from the tooltipContent computed property.

工具提示将显示我们当前位置的信息。 它从tooltipContent计算属性获取内容。

onMapClick method handles dblclick events on the map to set the marker position to the clicked spot.

onMapClick方法手柄dblclick在地图上的事件来设置标记的位置所点击的点。

getAddress method is for reverse geocoding. It returns a human-readable address from the marker’s point location. We use fetch to call the Nominatim API and get the location’s display name. Because the process is asynchronous, it’s an async function.

getAddress方法用于反向地理编码。 它从标记的点位置返回人类可读的地址。 我们使用fetch调用Nominatim API并获取位置的显示名称。 因为该过程是异步的，所以它是一个async函数。

We also watch changes to position. When the value changes, we call the getAddress method and then emit an object with the new position and address name.

我们还观察position变化。 当值更改时，我们调用getAddress方法，然后发出具有新位置和地址名称的对象。

We should now be able to place a marker on our map.

现在，我们应该可以在地图上放置标记了。

The only thing we are missing now is the Geosearch feature. Import the component from vue2-leaflet-geosearch and place it on the map with a search provider.

我们现在唯一缺少的是Geosearch功能。 从vue2-leaflet-geosearch导入组件， vue2-leaflet-geosearch使用搜索提供程序将其放置在地图上。

On the mounted hook, we add a handler method onSearch for the geosearch/showlocation event which is invoked when a search result is selected. The onSearch method sets the marker to the search location.

在已挂接的挂钩上，我们为geosearch/showlocation事件添加了一个处理程序方法onSearch ，当选择搜索结果时会调用该事件。 onSearch方法将标记设置为搜索位置。

Now that we have finished implementing all the features of our Location Selector, we can test it out. To do that, just import it to some other component and handle the input event or use the v-model directive.

现在，我们已经完成了位置选择器的所有功能，可以对其进行测试。 为此，只需将其导入其他组件并处理input事件或使用v-model指令。

That all for this article, hope you enjoyed reading it. Check out the source code and demo and please share your comments or suggestions in the comment section.

这篇文章的全部内容，希望您喜欢阅读。 查看源代码和演示，然后在评论部分分享您的评论或建议。

翻译自: https://medium.com/@eyuelwoldemichael/create-an-interactive-location-selector-with-vue-js-and-leaflet-5808c55b4636

vue.js 和后台交互