이미지의 자바 마커 장소 onclick

지도를 클릭하면 입력란에 좌표를 배치 할이지도가 있습니다. 클릭 한 위치가 표시되는지도 상에 표시 할 마커가 있으면 좋을 것입니다.이미지의 자바 마커 장소 onclick

내가 찾은 예제는 다시 클릭 할 때지도의 모든 점을 남기고, 이미지 위에 클릭 한 마지막 위치에만 마커가 필요합니다. 도움이 될만한 사람이 있습니까? this 또는 this 예입니다. 첫 번째 이미지는 좋지만 이미지 아래에 마커 이미지를 배치하고 두 번째 이미지에는 모든 점을 남깁니다.

모든 도움을 주실 수 있습니다!

출처

2016-06-29 dnsko

당신은 논리를 얻습니다. 이제는 이전 클래스를 지우려면 클래스 나 ID 등을 설정하고 이전 클래스를 삭제하면됩니다. 예 : http://jsfiddle.net/95vczfve/37 –

정확히 찾고자했던 것입니다. Javascript는 확실히 내 전문 분야가 아니므로 물어 보는 것이 가장 좋습니다. 고마워요! @A.Wolff – dnsko

흠, 이것은 div를 본체에 추가 한 다음 div의 점을 설정하는 것이지만 실제 이미지에서는 작동하지 않습니다. 내가 할 때 이미지 뒤에 넣을 것입니다. – dnsko

는 Add a marker to an image in javascript?

에 허용 솔루션을 확장 그냥 첨부 된 div의 고유 한 클래스를 추가하고 모든 클릭 이벤트에 해당 클래스의 모든 요소를 제거했습니다.

수정 된 코드 :

$(document).ready(function(){ 
    $(document).click(function (ev) { 
     if($('div').length < 3) { 
      $(".marker").remove();  // remove all existing markers 
      $("body").append(   
       $('<div class="marker"></div>').css({  // include a class 
        position: 'absolute', 
        top: ev.pageY + 'px', 
        left: ev.pageX + 'px', 
        width: '10px', 
        height: '10px', 
        background: '#000000' 
       })    
      ); 
     } 
    }); 

});

조치 참조 : 주석의 요청에 따라 JSFIDDLE

업데이트 : FIDDLE

출처

2016-06-29 08:17:59 Fr0zenFyr

마침표를 제거해야합니다. 하지만 내가 다른 하나에 대해 언급 한 것처럼, 이것은 몸을 추가 할 것이고 실제''에 대해 가능하지 않을 것입니다. 이후로 그것에 div를 추가하고 있습니다. 나는 잘 모르겠다 @ Fr0zenFyr – dnsko

@dnsko 업데이트를 참조하십시오. 나는 이미지 태그를''내부에 넣었고 거의 같은 자바 스크립트를 사용했다. – Fr0zenFyr

트릭은 마커를 '절대'로 배치하고 상위 컨테이너를 이미 '상대'로 배치하는 것입니다. 이것이 여전히 당신이 원하는 것이 아니라면, 아마 당신의 요구 사항을 분명히 이해하지 못할 것입니다. – Fr0zenFyr

아니 가장 좋은 방법,하지만 simpliest 내가 coult에 대한 최단 생각 내가 할 수있는 코드 :

<!doctype html> 
<html> 
    <head> 
     <title> 
      Bla! 
     </title> 
     <style type='text/css'> 
      div.divImgContainer { position:absolute; top:10px; left:10px; bottom:10px; right:10px; border: 1px solid black; } 
      div#divMark { position:absolute; top:-100px; left:-100px; background-color:red; width:3px; height:3px;} 
     </style> 
     <script type='text/javascript'> 
      function ShowMarker(event) { 
       //console.log (event); 
       console.log (event); 
       var mark = document.getElementById('divMark'); 
       mark.style.top = (event.clientY)+'px'; 
       mark.style.left = (event.clientX) +'px'; 
      } 
     </script> 
    </head> 
    <body> 
     <div class='divImgContainer' onclick='ShowMarker(event);'> 
      <!-- set image as background to this div --> 
     </div> 
     <div id='divMark' ><!-- you can change the "x" to image of marker if needed --></div> 
    </body> 
</html>

출처

2016-06-29 08:25:55

이미지의 자바 마커 장소 onclick

답변

관련 문제