用地理编码器php和feflet.js映射

Web应用程序中的

互动地图具有很多很棒的用途。从可视化数据到突出关注点，预计地图可以轻松地在位置的背景下传达思想。

但是，最难的部分是将数据转换为地图可以理解的坐标。幸运的是，GeoCoder PHP允许我们连接到不同的地理编码提供商。结合一个简单的JavaScript库的FelleT.js，创建地图是微风的。

钥匙要点

地理编码器php和feflet.js可以有效地组合以在Web应用程序中创建交互式图，从而将数据转换为映射可以轻松理解的坐标。

>地理编码器库允许连接到不同的地理编码提供商，并在您的需求更改时可以切换适配器的能力，而无需重写您的应用程序如何接收数据。>
• > feflet.js是一个功能强大的JavaScript库，通过处理地图的相互作用层来使映射变得容易，包括创建单个标记和格式化数据阵列，以传单期望。
可以使用各种传单JS选项和功能自定义地图的外观和交互性，并且可以使用PHP从数据库中获取这些功能的数据，然后传递到传单JS函数。
开始
• 与作曲家有关，包括地理编码器PHP库很简单：
• >我们还将一些html添加到一个简单的index.php文件中以包含bootstrap，以便我们有一个很好的环境来显示我们的地图：

设置地理编码器

地理编码器将自己视为缺少PHP的地理编码器库。它可以通过三个简单的步骤使用：

{
  "require": {
    "willdurand/geocoder": "*"
  }
}

注册一个适配器

注册提供商

<?php require 'vendor/autoload.php';

?>



    <title>A simple map with Geocoder PHP and Leaflet.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">


<div>
    <div>
        <div>
            <h1 id="A-simple-map-with-Geocoder-PHP-and-Leaflet-js">A simple map with Geocoder PHP and Leaflet.js</h1>
        </div>
        <div>
            <div>

            </div>
        </div>
    </div>
<!-- /row -->
</div> <!-- /container -->
<script></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

注册一个适配器

>该适配器是通过其API连接并将数据连接到您选择的提供商的机制。一些适配器在PHP 5.3中使用内置功能，例如卷曲和插座。其他人，例如Buzz，Guzzle和Zend HTTP客户端，使用第三方开源库，这些库只需要您将其依赖性添加到Composer文件中。
1. 地理编码器库的美丽是适配器步骤的抽象。如果您的需求更改而无需您重写应用程序如何接收数据，则可以交换适配器。
2. 在此示例中，我们将在地理编码器php库中使用卷曲和随附的curlhttpadapter类。
在我们的index.php文件中，让我们添加适配器：>
注册提供商

>有许多地理编码提供商由地理编码器PHP库支持，包括Google Maps，Bing Maps，Nominatim通过OpenStreetMap和Tomtom。

完整列表可以在GeoCoder PHP存储库的读书中找到。

>由其各自的班级代表的每个提供商都有自己的选择。根据您的需求，您可以在各种情况下注册多个提供商。如果您的申请需要使用OpenStreetMap绘制哥斯达黎加圣何塞的特定街道并在中国北京找到一条快速路线，则可能会很有用。

在此示例中，我只需使用Google Maps，但是以某种方式注册它，如果我想在将来添加另一个提供商，我只需要将其添加到一个数组中：>

地理

{
  "require": {
    "willdurand/geocoder": "*"
  }
}

>现在，我们可以将地址传递到您新实例化的$ GeoCoder对象内的GeoCode（）方法。这将返回通过以前选择的提供商实例化的结果对象。此结果对象具有我们可以使用的getLatitude（）和getLongitude（）方法。

>

与feaflet.js

<?php require 'vendor/autoload.php';

?>



    <title>A simple map with Geocoder PHP and Leaflet.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">


<div>
    <div>
        <div>
            <h1 id="A-simple-map-with-Geocoder-PHP-and-Leaflet-js">A simple map with Geocoder PHP and Leaflet.js</h1>
        </div>
        <div>
            <div>

            </div>
        </div>
    </div>
<!-- /row -->
</div> <!-- /container -->
<script src="https://img.php.cn/ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

集成

feflet.js是一个功能强大的JavaScript库，使映射变得非常简单。

>

地图由三个部分组成：

tiles

1. >相互作用层（通常是通过JavaScript和CSS）>
>数据点
3. 瓷砖是显示地图细节的256 x 256像素正方形。 MapBox和CloudMade之类的服务使您可以创建自己的瓷砖。在此示例中，我创建了一个使用CloudeMade的免费帐户，并将使用给出的API密钥显示其托管服务中的瓷砖。>
通过FelleT.js处理相互作用层。我只是将传单JavaScript和CSS库包括在我们的启动器HTML模板中：

>数据点已经用我的地理编码器代码早些时候创建。我只需要以传单期望的方式格式化数据阵列。

>

在这个简单的示例中，我只需创建单个标记作为JavaScript变量，这些变量将通过PHP产生的字符串包含在我的地图中。

// Setup geocoder adapter.
$adapter = new \Geocoder\HttpAdapter\CurlHttpAdapter();

>传单可以选择该数据通过Geojson格式传递，以供更大，更动态的数据集传递。

由于传单将映射代码注入现有的DOM元素，因此我们首先必须在HTML内定义该元素。我们可以通过简单地创建一个具有唯一ID的DIV来做到这一点：

>

然后，我们可以通过调用内置映射（）JavaScript方法并在页脚中传递ID：

// Create a chain of providers.
// Be sure to include my previously created adapter.
$chain = new \Geocoder\Provider\ChainProvider(
    array(
        new \Geocoder\Provider\GoogleMapsProvider($adapter),
    )
);

// Instantiate the geocoder.
$geocoder = new \Geocoder\Geocoder();

// Register my providers.
$geocoder->registerProvider($chain);

现在，我们构建了地图的三个部分。要注册瓷砖，我们只需调用内置的tileLayer（）方法，如果需要，定义属性和缩放级别，然后附加addto（）方法：>

>最后，我们使用我们之前定义的PHP数组打印地图数据，并确保通过将它们定义为组来确保将其集中在这些数据点上。总而言之，页脚中的JavaScript将是：

如果您走了这么远，您会注意到什么都不会发生。

这是因为传单不会在地图div的高度或宽度上注入属性，从而使您可以根据需要进行样式并调整大小。只需给您的div一个高度和宽度，您的地图就应该出现！

>

结论

>您可以使用GeoCoder PHP库和传单来创建美丽的互动地图。请务必查看每个项目的各个文档，因为还有更多的高级自定义。

>查看本文的演示或在Github上拨出它。经常询问的问题（常见问题解答）关于用地理编码器PHP和传单JS 映射的问题（常见问题解答）

>如何将传单Js与PHP集成？首先，您需要在PHP文件中包括传单JS库。这可以通过下载库并将其链接到PHP文件或使用CDN来完成。包含库后，您可以使用L.Map（）函数初始化地图。然后，您可以使用各种传单JS功能将图层，标记和其他功能添加到地图中。这些功能的数据可以使用PHP从数据库中获取，然后传递到传单JS函数。

>

>什么是地理编码，在传单JS？

地理编码中如何使用该过程。将地址转换为地理坐标的方法，您可以将其用于将标记放在地图上或放置地图。在传单JS中，您可以使用Nominatim或Google的Google API等地理编码服务将地址转换为坐标。拥有坐标后，您可以使用l.marker（）函数在指定的坐标处将标记放在地图上。

>

>我如何使用php从数据库中获取映射？>

>如何自定义地图的外观？

可以使用各种传单JS选项和功能自定义地图的外观。例如，您可以使用setView（）函数来设置地图的初始地理中心和缩放级别。您还可以使用L.Tilelayer（）函数在地图中添加瓷砖层，该函数确定了地图的基础层的视觉外观。 L.Map（）函数的选项参数可用于设置各种其他选项，例如地图的最大缩放级别，是否显示归因控制等等。使用地理编码服务？

使用地理编码服务时，出于各种原因，例如网络问题，无效输入或超过服务的使用限制，可能会发生错误。这些错误可以通过使用您使用的编程语言提供的错误处理技术来处理这些错误。例如，在PHP中，您可以使用try-catch语句来捕获异常并适当处理它们。

>如何优化地图的性能？

>有几种方法可以优化。地图的性能。一种方法是使用针对性能进行优化的瓷砖层，例如向量瓷砖层。另一种方法是一次限制地图上显示的功能数量，例如使用聚类或仅在当前地图视图中显示功能。您还可以通过使用有效的数据库查询来优化PHP代码的性能，并在适当的情况下缓存结果。

>

>如何使我的地图响应？

>使您的地图响应涉及确保它的响应在不同的屏幕尺寸和设备上正确显示。这可以通过使用CSS媒体查询来根据屏幕尺寸调整地图容器的大小和布局来实现。您还可以使用传单JS Map.invalidatesize（）函数来更新映射的大小和位置。可以使用L.Icon（）函数将自定义标记添加到您的地图中。此功能使您可以指定自定义图像作为标记图标。您还可以指定图标的大小，锚点和其他属性。然后，可以在创建标记时将自定义图标传递给l.marker（）函数。

我如何使用传单JS显示Geojson文件中的数据？

feaflet js提供了l.geojson（）函数，可用于显示地图上Geojson文件的数据。此功能将Geojson对象作为输入，并创建包含Geojson数据所描述的功能的图层。可以使用L.Geojson（）函数提供的各种选项和方法来对这些功能进行样式和交互。 Geojson数据可以使用PHP或JavaScript从文件或服务器获取。>

以上是用地理编码器php和feflet.js映射的详细内容。更多信息请关注PHP中文网其他相关文章！