如何在ol3的map div中放置自定義控件？

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（...）為null

代碼2 ：純Java腳本，但是使用構造函數創建圖像，僅此而已！

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沒有實現接口Node。 。

代碼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未實現接口Node。

有人可以解釋一下失敗的代碼怎么了嗎？ 對於這個冗長的問題，我深表歉意，但不確定該問題是否來自JQuery，JavaScript或與新的OL3版本有關。 歡迎任何解釋！ 謝謝

Answer 1

1. code1無法正常工作，因為您在元素尚未在dom上准備就緒時使用了getElementById 。 您可以使用element.addEventListener("click", action, false); 但我不確定是否可行。

2. 代碼2的工作原理是，您將偵聽器直接附加到元素（就像我在1上建議的那樣），並且您沒有在DOM中搜索它（ getElementById ）

3. 代碼3不起作用，因為appendChild是本機DOM方法，並且僅接受DOM節點作為參數。 您要附加的元素（ $('body').append($('<div/>'..... ）是一個jQuery對象，而不是DOM元素。

4. 代碼4不應出於與3相同的原因工作。

您的問題與ol3無關。 這是jQuery和JS的問題。 希望我能對你有所幫助