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>
<input id="distance" value=100> <button id="setDistance">설정</button>

CSS

#map {
    width: 100%;
    height: 500px;
}

JavaScript

var map = new thinkware.maps.Map("map", {
    center: {
        twX: 169030, 
        twY: 517922
    },
    level: 8,
    type: "i",
    callback: success = function() {
        console.log("success");
    },
});
var imageFeatures = [];
var imageFeature;
var direction = -1;
for (var i = 0; i < 10; i++) {
    direction *= -1;
    x = 169030 + i;// + parseInt(Math.random()*1000, 10) * direction;
    y = 517922;// + parseInt(Math.random()*1000, 10) * direction;
    imageFeature = new thinkware.maps.ImageFeature({
        map: map,
        position: {
            twX: x,
            twY: y
        },
        src: "https://api.map.inavi.com/Scripts/Styles/v1/image/middle_marker.png",
        anchor: {
            x: 0.5,
            y: 1
        }
    });
    imageFeatures.push(imageFeature);
}
var featureClusterer = new thinkware.maps.FeatureClusterer({
    map: map,
    features: imageFeatures,
    distance: 50
});
var distance = document.getElementById("distance");
document.getElementById("setDistance").onclick = function() {
    featureClusterer.setDistance(distance.value);
};