Openlayers在地图上方添加自定义div

时间:2013-07-18 14:30:15

标签: javascript openlayers openstreetmap

我是新手。我有openlayers的地图(OSM)。我试着添加测量工具。我正在使用这个例子http://openlayers.org/dev/examples/measure.html但是我需要像缩放线一样在地图上移动按钮。

我试过这段代码

document.getElementById("map").innerHTML += '<div id="options" style="position: absolute;z-index: 10000;bottom: 0px;left: 100px;"><input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);" checked="checked" /><label for="noneToggle"> Nav</label><input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" /><label for="lineToggle"> measure </label>  <span id="output"></span></div>'

但它会使地图​​冻结。 带地图的页面看起来像

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<body>
...
<script type="text/javascript" src="/map/lib/OpenLayers.js"></script>
...
</body>
</html>

所以我不能只在#map中添加我的按钮。 那我怎么能通过js在地图上添加自定义div?

1 个答案:

答案 0 :(得分:0)

哦,我应该使用document.createElement("div")代替innerHTML