Question

我正在使用html地图标签在php中处理图像地图。我现在的脚本填充了特定数量的地图单元格。你可以看到我在这里所做的一切：http://terrachaos.com/doa/map/

我无法根据用户悬停的地图单元设计从数据库中检索数据的方法。特别是坐标。我希望PHP比较坐标x和amp; y到数据库中的相应行。

我目前正在使用 simple_html_dom.php 来解析包含我的地图和控件属性的页面。我只是不确定如何使用它来使用SQL数据库中的数据动态填充每个区域的信息。

我已经设置了数据库以及存储信息的相应php变量。只需要有更多经验的人帮助我完成下一步。

主要变量： 变量对应于数据库列的名称。

$ MTYPE
$ M级
$ mCoordx
$ mCoordy
$ mOwner
$ mAlliance
$ MFLAG
$ mLord
$ mImage

主图像映射 - index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/css.css" type="text/css" />
    <title>Ocelot World Map: Sector 0-74</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.maphilight.min.js"></script>
    <script type="text/javascript">$(function() {
        $('.map').maphilight();
    });</script>
</head>
<body>
<div id="container" style="width: 1000px; position:absolute;">
<div class="title"><h1>Ocelot World Map: Sector 0-74</h1></div>
<div id="image-holder">
<img class="map" src="images/grass.png" width="750" height="750" usemap="#map">
<map name="map">
<?php
// Include Connections
include ("includes/connections.php");

// Dispay Errors (Development use only)
error_reporting(E_ALL);
ini_set("display_errors", "1");

// Area Vars
$over = "document.getElementById('info').style.display = 'block'";
$out = "document.getElementById('info').style.display = 'none'";
$href = 22;
$alt = 00;
$title = 'HelloWorld';
$class = 'areaSelect';
$maxcoord = '74';

// Cell Size & Amount Variables
$columns = 75;
$rows = 75;
$width = 10;
$height = 10;

// Loop to generate values for custom attribute.
for( $coordx = 0; $coordx < $maxcoord; $coordx++ );
for( $coordy = 0; $coordy < $maxcoord; $coordy++ );

// Loop to dynamically generate areas.
for( $x = 0; $x < $columns; $x++ )
{
   for( $y = 0; $y < $rows; $y++ )
   {
      $a = ($x * $width);
      $b = ($y * $height);

      $coords = array( $a, $b, ($a + $width), ($b + $height) );
      echo '<area class="'.$class.'" shape="rect" coords="'.implode( ',', $coords ).'" href="'.$href.'" onmouseover="'.$over.'" onmouseout="'.$out.'" data-coordx="'.$coordx.'" data-coordy="'.$coordy.'" alt="'.$alt.'" title="'.$title.'" />'."\n";
   }
}

// Close Connecction
mysql_close($sql);
?>
</map>
</div>

<div id="info" style="display:none">
    <h4>Area Information</h4>
    <?php include ("script.php"); // Include Simple HTML DOM Script
        list ($mType, $mLevel, $mCoordx, $mCoordy, $mOwner, $mAlliance, $mFlag, $mLord, $mImage) = dataFiller();
    ?>
</div>

<a href="./">Back to Sector Select</a>
</div>
<!-- Java Script Center -->
<!--<script>
var winl = (screen.width - 1000) / 2;
document.getElementById('container').style.left = winl +'px';
</script>-->
</body>
</html>

DOM Parser - script.php

注意： 在文件末尾附近是foreach ...语句。随着数据量的填充，我最好只在触发/需要时加载信息。我可以得到一些帮助吗？也许是一个功能？

 <?php
    include('includes/simple_html_dom.php'); //Load/include the PHP Simple HTML DOM Parser

    $html = file_get_html('http://www.terrachaos.com/doa/map/index.php'); // Load your html file

    // create a series of variables to call on later

    $imgtitle = $html->find('div.title', 0)->plaintext; //here we reference the HTML file, and find the div with the class "title" and display it as plaintext

   // ok for some reason and hopefully someone out there can add why
   // I had to reference the fist instance of each element here 
   // referenced as the ',0' in each case. 

   // here you can see we search for the div 'image-holder'
   // and then search in that div for the first image and save it to a variable

    $imageurl =  $html->find('#image-holder',0)->find('img',0); 

   // here we target the image scr, width, height, style, alt, border and usemap and assign them to variables

    $imagesrc = $imageurl->src;
    $imageWidth = $imageurl->width;
    $imageHeight = $imageurl->height;
    $imageStyle = $imageurl->style;
    $imageAlt = $imageurl->alt;
    $imageBrd = $imageurl->border;
    $imageUsemap = $imageurl->usemap;

    $map = $html->find('map',0); // here we look for the map and assign it to a variable

    // here we target the map ID and Name and usemap and assign them to variables

$mapID = $map->id;
$mapName = $map->name;

    // we assigned a class to the map areas to find them easier
    $imgmaparea = $html->find('.areaSelect');

    // ok although the example only has one map area this will find multiple
    // areas and print them on the screen using the 'foreach' function 
    foreach ($imgmaparea as $value){
     $areaShape = $value->shape;
     $areaCoords = $value->coords;
     $areaHref = $value->href;
     $areaTitle = $value->title;
     $areaAlt = $value->alt;
     $areaCoordx = $value->data-coordx;
     $areaCoordy = $value->data-coordy;
      // print them on the screen
         echo 'Shape: '.$areaShape. '<br>';
     echo 'Coords: '.$areaCoords. '<br>';
         echo 'Href: '.$areaHref. '<br>';
         echo 'Title: '.$areaTitle. '<br>';
         echo 'Alt: '.$areaAlt. '<br>';
         echo 'data-coordx '.$areaCoordx. '<br>';
         echo 'data-coordy '.$areaCoordy. '<br>';

   }
         // print them on the screen
         echo 'name: '.$mapName. '<br>';
         echo 'Id: '.$mapID. '<br>';
         echo 'filename: '.$filename. '<br>';
         echo 'Src: '.$imagesrc. '<br>';
         echo 'Width: '.$imageWidth. '<br>';
         echo 'Height: '.$imageHeight. '<br>';
         echo 'Style: '.$imageStyle. '<br>';
         echo 'Alt: '.$imageAlt. '<br>';
         echo 'Usemap: '.$imageUsemap. '<br>';

   ?>

Answer 1

您需要考虑使用AJAX调用。这样做的方式是，您的用户点击地图区域，这会触发Javascript函数来发出AJAX请求。您的服务器将根据您的需要处理此问题，并将数据返回给用户的Web浏览器。

我建议使用jQuery library +其$.ajax();对象。

PHP + SQL + JS动态地图

主图像映射 - index.html

DOM Parser - script.php

1 个答案: