Question

对不起，这个问题与ol3无关，并且存在一些明显的代码错误（作者注意）

我用最新版本的Openlayers 3.15.1重写了一个Ol 2地图应用程序。我需要添加自定义控件来操纵海面温度图。我想将自定义控件放在地图上。但是，在尝试重新创建一些示例代码以显示如何使用Ol3编写自定义控件之后，我发现了一些正确重新创建它的缺点。

自定义控件由一个小图标组成，点击它可以做一些stutf。下面我将展示所使用代码的几个版本。基本上，控件是由最初加载的函数创建的。

其中只有一个正常工作，我想了解其他人为什么不这样做。所有示例几乎相同，两个是纯javascript，两个是JQuery试图寻找最佳解决方案。

代码1 ：纯Javascript但使用innerHTML将图片插入到。图像似乎没有插入DOM。

var texto = "<img id=\"tool_draw\" src=\"/js/Saidin/Image/draw_line_off.png\">";
var element = document.createElement('div');
element.innerHTML=texto;
element.className = 'ol-unselectable ol-mycontrol';
element.style.position="absolute";
element.style.width="24px";
element.style.top= "70px";
element.style.left= "9px";;

var action= function(e){ alert('hola'); }

document.getElementById("tool_draw").addEventListener("click", action, false);

var okk= new ol.control.Control({
    element:element
  });

map.addControl(okk);

此代码不起作用。错误是： document.getElementById（...）为空

代码2 ：纯Javascript但使用构造函数创建图像并且全部！

var texto =  "/js/Saidin/Image/draw_line_off.png";
var boton = document.createElement('img');
boton.src=texto;
boton.className = 'ol-unselectable ol-mycontrol';
boton.setAttribute("id","tool_draw");
boton.style.position="absolute";
boton.style.top= "70px";
boton.style.left= "9px";

var action= function(e){ alert('hola'); }

boton.addEventListener("click", action, false);

var okk= new ol.control.Control({
   element:boton
});

map.addControl(okk);

此代码工作正常！

代码3 ：我认为相当于代码1，但使用的是JQuery库

var texto ="<img id=\"tool_draw\" src=\"/js/Saidin/Image/draw_line_off.png\">";
$('body').append($('<div/>', {
    id:'hola',
    'class' : 'ol-unselectable ol-mycontrol',
    texto:texto,
    css: { "position":"absolute","top": "70px", "left":"9px" }
}));

element=$('#hola');
var cont= function(e){ alert('hola'); }

$("#tool_draw").on('click', cont );

var okk= new ol.control.Control({
   element:element
});

map.addControl(okk);

此代码不起作用。错误是： TypeError：Node.appendChild的参数1没有实现接口节点。。

代码4 ：我认为相当于代码2，但使用的是JQuery库

var element=$('<img>', {
id:'tool_draw',
src:'/js/Saidin/Image/draw_line_off.png',
'class' : 'ol-unselectable ol-mycontrol',
 css: { "position":"absolute","top": "70px", "left":"9px" }
 });

$('#map').append(element);
var cont= function(e){ alert('hola'); }

element.on('click', cont );

var okk= new ol.control.Control({
     element:element
});

map.addControl(okk);

此代码工作正常！但是......来自ol.js的相同错误出现 TypeError：Node.appendChild的参数1没有实现接口节点。

有人可以解释一下失败的代码有什么问题吗？我为这个长期问题道歉，我不确定问题是来自JQuery，JavaScript还是与新的OL3版本有关。欢迎任何解释！感谢

Answer 1

code1不起作用导致您在dom上未准备好元素时使用getElementById。您可以使用element.addEventListener("click", action, false);，但我不确定它是否有效。
代码2工作会导致您将侦听器直接附加到元素上（就像我在1上建议的那样）并且您不是在DOM中搜索它（getElementById）
代码3不起作用因为appendChild是一个本机DOM方法，只接受DOM节点作为参数。您尝试追加的元素（$('body').append($('<div/>'.....）是一个jQuery对象，而不是DOM元素。
代码4的工作原因与3相同。

你的问题与ol3无关。这是jquery＆amp; js问题。希望我能帮助你一点

如何在ol3中的地图div中放置自定义控件？

1 个答案: