65.9K
CodeProject 正在变化。 阅读更多。
Home

生成地图

会员 4206974
starIconstarIconstarIconstarIconstarIcon

5.00/5 (3投票s)

2014 年 1 月 16 日

CPOL

3分钟阅读

viewsIcon

21853

downloadIcon

433

Mapper是一个PHP脚本，用于处理地图和内部的可链接符号。

 

引言

Mapper是一个PHP脚本，用于处理带有内部符号的地图；这些符号在形状、颜色、尺寸和交互类型（如锚链接和事件处理）方面具有很大的灵活性。

背景

地图是一个用于传达想法和显示综合数据的有用工具。 Google允许我们拥有真实的地图，但如果我们不需要真实的地图，或者我们不想让Google知道我们在做什么，这些脚本可能会很有用。

Using the Code

Mapper由三个脚本构建

  • mapper.php 显示地图和可链接符号
  • mapper.js 处理点集
  • genimg.php 通过 GD 创建几何符号
为了显示可链接地图，必须包含 mapper.php 脚本，并且 genimg.php 脚本必须在同一目录中。 通过使用参数数组调用函数 createMap 来创建带有其符号的地图，该参数数组几乎包含地图图像名称和要放入地图中的点，如下面的示例所示。（尝试）。
<html>
    ...
    <body>
        ...
        include 'mapper.php';
        ...
        $aParams = array("image"=>"images/PiemontMap.gif",
                "points"=>array("Turin"=>array("x"=>127,"Y"=>250),
                "Ivrea - Arduino"=>array("x"=>146,"Y"=>190),
                "Garessio - Sanofi"=>array("x"=>160,"Y"=>370)));        
        echo createMap($aParams);
        ...
    </body>
</html>

可以通过在通用级别（即针对所有点）或针对某些点类别或单个点设置一些属性来自定义地图。 在点级别进行的设置会覆盖与类别关联的设置，而与类别关联的设置会覆盖通用级别的设置，最后，通用级别的设置会覆盖默认设置。

地图的符号

默认符号是一个红色圆圈，半透明（alpha = 0.7）且直径为10像素；这可以通过添加参数 color、shape、alpha 和 width 来部分或完全更改；在下面的代码中，它们是在通用级别添加的，即它们对所有点都有效。（尝试）。

    ...
    $aParams = array("image"=>"images/PiemontMap.gif",
                "color" =>"008080","width" =>14,"alpha" =>0.9,"shape" =>"diamond",
                "points"=>array("Turin"=>array("x"=>127,"Y"=>250),
                "Ivrea - Arduino"=>array("x"=>146,"Y"=>190),
                "Garessio - Sanofi"=>array("x"=>160,"Y"=>370)));        
    echo createMap($aParams);    
    ...

shape 参数可以是图像或 UNICODE 值（带有许多符号）。（尝试）。

    ...
     $aParams = array("image"=>"images/PiemontMap.gif","Width"=>30,"alpha"=>1,"color"=>"gray",
                "points"=>array("Turin"=>array("x"=>127,"Y"=>250,"shape"=>"images/condor.gif"),
                "Ivrea - Arduino"=>array("x"=>146,"Y"=>190,"Shape"=>"&#x2328;"),
                "Garessio - Sanofi"=>array("x"=>160,"Y"=>370,"Shape"=>"&#x2697;")));        
    echo createMap($aParams);
    ...

一个符号可以变成一个链接

anchor 参数可以与一个点关联以创建一个链接；该值是要链接的站点或文档（不带 href=），并且可以包含其他锚参数（例如 target）。（尝试）。

    ...
    $aParams = array("image"=>"images/PiemontMap.gif",
                "width"=>50,
                "points"=>array("Turin"=>array("x"=>127,"Y"=>250,"shape"=>"images/logopace.gif",
                    "anchor"=>"http://rete.condorinformatique.com/index.php target=_blank"),
                "Ivrea - Arduino"=>array("x"=>146,"Y"=>190,"shape"=>"images/arduino.jpg"),
                "Garessio - Sanofi"=>array("x"=>160,"Y"=>370,"shape"=>"images/logo-sanofi.png")));
    echo createMap($aParams);    
    ...

处理符号上的事件

我们可以在所有符号或特定点附加事件，event 参数接受函数名称或完整的事件，在第一种情况下，会生成一个 onclick 事件

语法示例翻译为
"event"=>"function_name""event"=>"Signal"onClick='Signal(pointName)'
"event"=>"onevent=function_name(parameter(s))""event"=>"onMouseOver='alert(\"nation=\"+this.title)'" onMouseOver='alert("nation="+this.title)'

(尝试）。

    ...
    $aParams = array("image"=>"images/world.png","width"=>20,
                     "event"=>"alert",
                     "points"=>array("Italia"=>array("x"=>302,"Y"=>114,"shape"=>"images/it.png",
                                                      "event"=>"onMouseOver='alert(\"nation=\"+this.title)'"),
                                     "Francia"=>array("x"=>278,"Y"=>105,"shape"=>"images/fr.png"),
                                     "Spagna"=>array("x"=>274,"Y"=>128,"shape"=>"images/es.png"),
                                     "U.S."=>array("x"=>93,"Y"=>118,"shape"=>"images/us.png")));        
    echo createMap($aParams);
    ... 

如何在地图上拥有不同的符号

通过在点级别插入不同的形状可以获得不同的符号，但最简单的方法是将形状集分配给通用级别的类型，然后在点级别插入 type 参数。（尝试）。

    ...
    $aParams = array("image"=>"images/world.png",
                    "Europa"=>array("color" =>"blue","alpha" =>0.5,"shape"=>"diamond"),
                    "Africa"=>array("alpha" =>1,"shape"=>"images/Elephant.png","width"=>24),
                    "America"=>array("color" =>"yellow","shape"=>"triangle","width"=>15),
                    "points"=>array("Italia"=>array("x"=>302,"Y"=>114,"type"=>"Europa"),
                                    "Francia"=>array("x"=>282,"Y"=>105,"type"=>"europa"),
                                    "Spagna"=>array("x"=>272,"Y"=>125,"type"=>"europa"),
                                    "Tanzania"=>array("x"=>355,"Y"=>225,"type"=>"Africa"),
                                    "Kenia"=>array("x"=>360,"Y"=>200,"type"=>"Africa"),
                                    "Birmania"=>array("x"=>483,"Y"=>190,"type"=>"Asia"),
                                    "U.S."=>array("x"=>93,"Y"=>118,"type"=>"America")));        
    ...

处理点

在地图中设置点坐标很麻烦。 Mapper通过允许您使用鼠标插入、更新和删除点并收集坐标来简化此任务。 这是通过使用设置为 true 的第二个参数调用 createMap 完成的。 只需要图像和点参数。 除了包含 mapper.php，我们还需要包含一个 JavaScript 代码 mapper.js。 createMap 添加了两个按钮，一个用于显示点列表，一个用于恢复初始状态；用户必须插入一个按钮以捕获点（有关详细信息，请参阅文档）。

(尝试）。

    ...
    $aPoints = array("Tanzania"=>array("x"=>355,"Y"=>225),
                     "Kenia"=>array("x"=>360,"Y"=>200),
                     "Birmania"=>array("x"=>483,"Y"=>190));
    $aParams = array("image"=>"images/world.png","points"=>$aPoints);        
    echo createMap($aParams,true); echo "<input type=button onclick='alert(savePoints(mapper.returnPoints()))' value='Save'>";
    ...

与 JOOMLA 一起使用！

在 JOOMLA 中使用 Mapper！需要 Sourcerer 插件，该插件允许在文章中插入 JavaScript、PHP 脚本、HTML 标记和 CSS 指令；以下是创建地图（用于处理放置点）的示例。

    ...
    {source}
    <?php
    include 'mapper/mapper.php';l
    JHTML::script("mapper.js","mapper/js/",false);   // include javascript mapper functions
    $aParams = array("image"=>"mapper/images/world.png","alpha"=>1,
                     "points"=>array("Kenia"=>array("x"=>360,"Y"=>200),
                     "Tanzania"=>array("x"=>355,"Y"=>225),
                     "Birmania"=>array("x"=>483,"Y"=>190),
                     "U.S."=>array("x"=>93,"Y"=>118)));
    echo createMap($aParams,true);
    echo "<input type=button onclick='alert(mapper.returnPoints())' value='Save'>";
    ?>
    {/source}
    ...
© . All rights reserved.