JSFiddle - React, Tailwind, and code Playground

by cs09g

HTML

<meta charset="UTF-8">
<title> 지도 이벤트 등록 </title>
<script type="text/javascript" src="http://api.map.inavi.com/Map/GetApi?key=e36391053096240fa6b2c3edcb671c5d63c81a8a"></script>
<div id="map"></div>
<div id="click">click</div>
<div id="wheel">wheel</div>
<div id="mousemove">mousemove</div>

CSS

#map {
    width: 100%;
    height: 500px;
}
#click, #wheel, #mousemove {
    display: inline-block;
    width: 100px;
    background: rgba(0,0,255,0.5);
    text-align: center;
    font-weight: bold;
}

JavaScript

var map = new thinkware.maps.Map("map", {
    center: {
        twX: 169030, 
        twY: 517922
    },
    level: 1,
    type: "i",
    callback: success = function() {
        console.log("success");
    },
});
var clickElm = document.getElementById("click");
var wheelElm = document.getElementById("wheel");
var mousemoveElm = document.getElementById("mousemove");
thinkware.maps.event.addListener(map, "click", function(e) {
    clickElm.style.background = "white";
    setTimeout(function() {
        clickElm.style.background = "rgba(0,0,255,0.5)";
    }, 500);
});
thinkware.maps.event.addListener(map, "wheel", function() {
    wheelElm.style.background = "white";
    setTimeout(function() {
        wheelElm.style.background = "rgba(0,0,255,0.5)";
    }, 500);
});
thinkware.maps.event.addListener(map, "mousemove", function() {
    mousemove.style.background = "white";
    setTimeout(function() {
        mousemove.style.background = "rgba(0,0,255,0.5)";
    }, 500);
});