用坐标绘制大厅的计划

Question

我是网络开发的初学者，我遇到了问题。 我有坐标坐标的xml文件。 这是xml文件：

<Places Width='800' Height='600' PlacesCount='180'>
  <Place ID='179' Fragment='0' Row='1' Place='1' X='80' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='188' Fragment='0' Row='1' Place='10' X='460' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='189' Fragment='0' Row='1' Place='11' X='520' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='190' Fragment='0' Row='1' Place='12' X='560' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='191' Fragment='0' Row='1' Place='13' X='600' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='192' Fragment='0' Row='1' Place='14' X='640' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='193' Fragment='0' Row='1' Place='15' X='680' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='180' Fragment='0' Row='1' Place='2' X='120' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='181' Fragment='0' Row='1' Place='3' X='160' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='182' Fragment='0' Row='1' Place='4' X='200' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='183' Fragment='0' Row='1' Place='5' X='240' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='184' Fragment='0' Row='1' Place='6' X='300' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='185' Fragment='0' Row='1' Place='7' X='340' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='186' Fragment='0' Row='1' Place='8' X='380' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='187' Fragment='0' Row='1' Place='9' X='420' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='35' Fragment='0' Row='10' Place='1' X='80' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='44' Fragment='0' Row='10' Place='10' X='480' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='45' Fragment='0' Row='10' Place='11' X='520' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='46' Fragment='0' Row='10' Place='12' X='560' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='47' Fragment='0' Row='10' Place='13' X='600' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='48' Fragment='0' Row='10' Place='14' X='640' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='49' Fragment='0' Row='10' Place='15' X='680' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='36' Fragment='0' Row='10' Place='2' X='120' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='37' Fragment='0' Row='10' Place='3' X='160' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='38' Fragment='0' Row='10' Place='4' X='200' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='39' Fragment='0' Row='10' Place='5' X='240' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='40' Fragment='0' Row='10' Place='6' X='280' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='41' Fragment='0' Row='10' Place='7' X='320' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='42' Fragment='0' Row='10' Place='8' X='360' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='43' Fragment='0' Row='10' Place='9' X='440' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='19' Fragment='0' Row='11' Place='1' X='80' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='28' Fragment='0' Row='11' Place='10' X='480' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='29' Fragment='0' Row='11' Place='11' X='520' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='30' Fragment='0' Row='11' Place='12' X='560' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='31' Fragment='0' Row='11' Place='13' X='600' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='32' Fragment='0' Row='11' Place='14' X='640' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='33' Fragment='0' Row='11' Place='15' X='680' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='20' Fragment='0' Row='11' Place='2' X='120' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='21' Fragment='0' Row='11' Place='3' X='160' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='22' Fragment='0' Row='11' Place='4' X='200' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='23' Fragment='0' Row='11' Place='5' X='240' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='24' Fragment='0' Row='11' Place='6' X='280' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='25' Fragment='0' Row='11' Place='7' X='320' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='26' Fragment='0' Row='11' Place='8' X='360' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='27' Fragment='0' Row='11' Place='9' X='440' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='3' Fragment='0' Row='12' Place='1' X='80' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='12' Fragment='0' Row='12' Place='10' X='480' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='13' Fragment='0' Row='12' Place='11' X='520' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='14' Fragment='0' Row='12' Place='12' X='560' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='15' Fragment='0' Row='12' Place='13' X='600' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='16' Fragment='0' Row='12' Place='14' X='640' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='17' Fragment='0' Row='12' Place='15' X='680' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='4' Fragment='0' Row='12' Place='2' X='120' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='5' Fragment='0' Row='12' Place='3' X='160' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='6' Fragment='0' Row='12' Place='4' X='200' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='7' Fragment='0' Row='12' Place='5' X='240' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='8' Fragment='0' Row='12' Place='6' X='280' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='9' Fragment='0' Row='12' Place='7' X='320' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='10' Fragment='0' Row='12' Place='8' X='360' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='11' Fragment='0' Row='12' Place='9' X='440' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='163' Fragment='0' Row='2' Place='1' X='80' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='172' Fragment='0' Row='2' Place='10' X='460' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='173' Fragment='0' Row='2' Place='11' X='520' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='174' Fragment='0' Row='2' Place='12' X='560' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='175' Fragment='0' Row='2' Place='13' X='600' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='176' Fragment='0' Row='2' Place='14' X='640' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='177' Fragment='0' Row='2' Place='15' X='680' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='164' Fragment='0' Row='2' Place='2' X='120' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='165' Fragment='0' Row='2' Place='3' X='160' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='166' Fragment='0' Row='2' Place='4' X='200' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='167' Fragment='0' Row='2' Place='5' X='240' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='168' Fragment='0' Row='2' Place='6' X='300' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='169' Fragment='0' Row='2' Place='7' X='340' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='170' Fragment='0' Row='2' Place='8' X='380' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='171' Fragment='0' Row='2' Place='9' X='420' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='147' Fragment='0' Row='3' Place='1' X='80' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='156' Fragment='0' Row='3' Place='10' X='460' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='157' Fragment='0' Row='3' Place='11' X='520' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='158' Fragment='0' Row='3' Place='12' X='560' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='159' Fragment='0' Row='3' Place='13' X='600' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='160' Fragment='0' Row='3' Place='14' X='640' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='161' Fragment='0' Row='3' Place='15' X='680' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='148' Fragment='0' Row='3' Place='2' X='120' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='149' Fragment='0' Row='3' Place='3' X='160' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='150' Fragment='0' Row='3' Place='4' X='200' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='151' Fragment='0' Row='3' Place='5' X='240' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='152' Fragment='0' Row='3' Place='6' X='300' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='153' Fragment='0' Row='3' Place='7' X='340' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='154' Fragment='0' Row='3' Place='8' X='380' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='155' Fragment='0' Row='3' Place='9' X='420' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='131' Fragment='0' Row='4' Place='1' X='80' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='140' Fragment='0' Row='4' Place='10' X='460' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='141' Fragment='0' Row='4' Place='11' X='520' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='142' Fragment='0' Row='4' Place='12' X='560' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='143' Fragment='0' Row='4' Place='13' X='600' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='144' Fragment='0' Row='4' Place='14' X='640' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='145' Fragment='0' Row='4' Place='15' X='680' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='132' Fragment='0' Row='4' Place='2' X='120' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='133' Fragment='0' Row='4' Place='3' X='160' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='134' Fragment='0' Row='4' Place='4' X='200' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='135' Fragment='0' Row='4' Place='5' X='240' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='136' Fragment='0' Row='4' Place='6' X='300' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='137' Fragment='0' Row='4' Place='7' X='340' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='138' Fragment='0' Row='4' Place='8' X='380' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='139' Fragment='0' Row='4' Place='9' X='420' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='115' Fragment='0' Row='5' Place='1' X='80' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='124' Fragment='0' Row='5' Place='10' X='480' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='125' Fragment='0' Row='5' Place='11' X='520' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='126' Fragment='0' Row='5' Place='12' X='560' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='127' Fragment='0' Row='5' Place='13' X='600' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='128' Fragment='0' Row='5' Place='14' X='640' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='129' Fragment='0' Row='5' Place='15' X='680' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='116' Fragment='0' Row='5' Place='2' X='120' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='117' Fragment='0' Row='5' Place='3' X='160' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='118' Fragment='0' Row='5' Place='4' X='200' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='119' Fragment='0' Row='5' Place='5' X='240' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='120' Fragment='0' Row='5' Place='6' X='280' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='121' Fragment='0' Row='5' Place='7' X='320' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='122' Fragment='0' Row='5' Place='8' X='360' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='123' Fragment='0' Row='5' Place='9' X='440' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='99' Fragment='0' Row='6' Place='1' X='80' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='108' Fragment='0' Row='6' Place='10' X='480' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='109' Fragment='0' Row='6' Place='11' X='520' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='110' Fragment='0' Row='6' Place='12' X='560' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='111' Fragment='0' Row='6' Place='13' X='600' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='112' Fragment='0' Row='6' Place='14' X='640' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='113' Fragment='0' Row='6' Place='15' X='680' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='100' Fragment='0' Row='6' Place='2' X='120' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='101' Fragment='0' Row='6' Place='3' X='160' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='102' Fragment='0' Row='6' Place='4' X='200' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='103' Fragment='0' Row='6' Place='5' X='240' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='104' Fragment='0' Row='6' Place='6' X='280' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='105' Fragment='0' Row='6' Place='7' X='320' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='106' Fragment='0' Row='6' Place='8' X='360' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='107' Fragment='0' Row='6' Place='9' X='440' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='83' Fragment='0' Row='7' Place='1' X='80' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='92' Fragment='0' Row='7' Place='10' X='480' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='93' Fragment='0' Row='7' Place='11' X='520' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='94' Fragment='0' Row='7' Place='12' X='560' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='95' Fragment='0' Row='7' Place='13' X='600' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='96' Fragment='0' Row='7' Place='14' X='640' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='97' Fragment='0' Row='7' Place='15' X='680' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='84' Fragment='0' Row='7' Place='2' X='120' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='85' Fragment='0' Row='7' Place='3' X='160' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='86' Fragment='0' Row='7' Place='4' X='200' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='87' Fragment='0' Row='7' Place='5' X='240' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='88' Fragment='0' Row='7' Place='6' X='280' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='89' Fragment='0' Row='7' Place='7' X='320' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='90' Fragment='0' Row='7' Place='8' X='360' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='91' Fragment='0' Row='7' Place='9' X='440' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='67' Fragment='0' Row='8' Place='1' X='80' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='76' Fragment='0' Row='8' Place='10' X='480' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='77' Fragment='0' Row='8' Place='11' X='520' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='78' Fragment='0' Row='8' Place='12' X='560' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='79' Fragment='0' Row='8' Place='13' X='600' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='80' Fragment='0' Row='8' Place='14' X='640' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='81' Fragment='0' Row='8' Place='15' X='680' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='68' Fragment='0' Row='8' Place='2' X='120' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='69' Fragment='0' Row='8' Place='3' X='160' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='70' Fragment='0' Row='8' Place='4' X='200' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='71' Fragment='0' Row='8' Place='5' X='240' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='72' Fragment='0' Row='8' Place='6' X='280' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='73' Fragment='0' Row='8' Place='7' X='320' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='74' Fragment='0' Row='8' Place='8' X='360' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='75' Fragment='0' Row='8' Place='9' X='440' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='51' Fragment='0' Row='9' Place='1' X='80' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='60' Fragment='0' Row='9' Place='10' X='480' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='61' Fragment='0' Row='9' Place='11' X='520' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='62' Fragment='0' Row='9' Place='12' X='560' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='63' Fragment='0' Row='9' Place='13' X='600' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='64' Fragment='0' Row='9' Place='14' X='640' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='65' Fragment='0' Row='9' Place='15' X='680' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='52' Fragment='0' Row='9' Place='2' X='120' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='53' Fragment='0' Row='9' Place='3' X='160' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='54' Fragment='0' Row='9' Place='4' X='200' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='55' Fragment='0' Row='9' Place='5' X='240' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='56' Fragment='0' Row='9' Place='6' X='280' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='57' Fragment='0' Row='9' Place='7' X='320' Y='145' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='58' Fragment='0' Row='9' Place='8' X='360' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='59' Fragment='0' Row='9' Place='9' X='440' Y='135' Width='35' Height='35' Type='1'>
</Place>

有PlaceId，Row和Place。 我需要在这些坐标上绘制一个大厅的计划。像这样的东西： example（抱歉，我不允许我在这里插入图片。低代表）

我不知道从哪里开始。我需要你的帮助，可能会有一些建议。

感谢。

Answer 1

我首先将数据以JSON格式发送到浏览器

[{PlaceId:1, X:10, Y:10, Width:35,Height: 35.... },
 {PlaceId:2, X:10, Y:10, Width:35,Height: 35.... },.... ]

然后，您可以尝试在容器内绘制小s

<div id="places">
    <div id="row1" class="row">
        <div class="rowNum">1</div>
            <div id="Place1" class="place"></div>
            <!-- taken class indicates different color -->
            <div id="Place2" class="place taken"></div> 

        </div>
    </div>
    <div id="row2" class="row">
        <div class="rowNum">1</div>
            <div id="Place3" class="place"></div>
            <!-- taken class indicates different color -->
            <div id="Place4" class="place taken"></div> 
        </div>
    </div>
</div>

您可以添加固定在HTML或jQuery中的坐标。并将元数据添加到每个位置，如Type，Fragment和PlaceID。

使用CSS设置地点样式以适合内联。