我们希望在地图上显示建筑物中特定物品(计算机,监视器等)的位置。 地图应该浏览地图的不同图层。
//编辑:
我们不想为每种可能性重新绘制每一个svg
我不知道怎么告诉svg它应该自己改变特定房间的颜色。
我想知道如何从建筑物的概述链接到特定的房间,以引导用户到位置
作为一个例子,我知道我正在寻找一张3014房间的桌子,这个房间号码我可以得到这张桌子位于该楼层#14房间的第三层楼的信息。
我们svg的一个例子
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100%"
height="100%"
viewBox="0 0 744.09448819 1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="TestSVG.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="359.93433"
inkscape:cy="691.62776"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1280"
inkscape:window-height="657"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs>
<script type="text/javascript">
<![CDATA[
var a = document.getElementById('svg2');
a.addEventListener('load', function(){
var rooms = document.getElementById('layer1').childNodes;
for (var i = 0; i < rooms.length; i++) {
rooms[i].addEventListener('click', function(e){
var node = e.target;
alert(node.id);
});
}
})
function showRoom(e) {
var node = e.target;
alert(node.id);
}
]]>
</script>
</defs>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 245.71428,506.64792 0,220 225.71428,0 -2.85714,-217.14286 c -138.4808,-1.13275 -151.99178,-1.74147 -222.85714,-2.85714 z"
id="path3336"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 245.71428,369.50506 0,-177.14285 220,0 0,180 -220,-2.85714"
id="path3338"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
style="opacity:1;fill:#008000;fill-opacity:0.43956048;stroke:#000000;stroke-width:0.94316924;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.2"
d="m 245.68495,192.33339 0,177.86449 220.96128,0 0,-177.86449 -220.96128,0 z"
id="Raum1"
inkscape:connector-curvature="0" />
<rect
style="opacity:1;fill:#008000;fill-opacity:0.43956048;stroke:#000000;stroke-width:0.99585056;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.2"
id="Raum2"
width="223.45309"
height="217.37878"
x="245.41631"
y="508.81155" />
</g>
</svg>
&#13;
以及我们如何在应用中打开svg
public class JavaScriptInterface {
Context mContext;
JavaScriptInterface(Context c) {
mContext = c;
}
@JavascriptInterface
public void showToast(final String room) {
MapActivity.this.runOnUiThread(new Runnable() {
@Override
public void run() {
mWebView.loadUrl("file:///android_asset/" + room + ".svg");
history.add(mWebView.getUrl());
}
});
Toast.makeText(mContext, room, Toast.LENGTH_SHORT).show();
}
}