Question 227967 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Unable to place the marker on exact mouse click area on the image

I am trying to place the marker on an image where the mouse clicks happen, but somehow my current code places the marker far from a mouse pointer which I don’t understand as both the marker position and the mouse click coordinates are in px.

Does someone have any idea about this?

$scope.obj = {};
$scope.obj.myStyle = {};
$scope.img = function(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coords = "X coords: " + x + ", Y coords: " + y;
  $log.info("coords--" + coords);
  $scope.obj.myStyle["left"] = event.clientX + 'px';
  $scope.obj.myStyle["top"] = event.clientY + 'px';
  $log.info($scope.obj.myStyle);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="myDiv" ng-click="img($event)">
  <img width="50%" height="50%" src="http://placekitten.com/g/400/300" alt="">
  <img style="width:20px;position: absolute;" ng-style="obj.myStyle" ng-if="obj.myStyle != {}" src="https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Marker-Outside-Chartreuse.png" id="marker" />

</div>
Tags:

2

Answers


  1. 0

    In this code, we first calculate the offsets of the click coordinates relative to the container and the image. These offsets are then used to adjust the marker’s position within the container.

    function updateMarkerPosition(event) {
    var container = document.getElementById("myDiv");
    var marker = document.getElementById("marker");

    var containerRect = container.getBoundingClientRect();
    var offsetX = event.clientX - containerRect.left;
    var offsetY = event.clientY - containerRect.top;

    marker.style.left = offsetX + "px";
    marker.style.top = offsetY + "px";
    marker.style.display = "block";
}

document.addEventListener("DOMContentLoaded", function() {
    var myDiv = document.getElementById("myDiv");
    myDiv.addEventListener("click", function(event) {
        updateMarkerPosition(event);
        $scope.$apply(function() {
            $scope.obj.myStyle = {
                "left": marker.style.left,
                "top": marker.style.top
            };
        });
    });
});
    <div id="myDiv" ng-click="img($event)">
    <img
        width="50%"
        height="50%"
        src="http://placekitten.com/g/400/300"
        alt=""
        id="image"
    />
    <img
        style="width: 20px; position: absolute; display: none;"
        ng-style="obj.myStyle"
        src="https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Marker-Outside-Chartreuse.png"
        id="marker"
    />
</div>
    Login or Signup to reply.
  2. 0

    In the most basic way and without involving Angular at all, just for the sake of showing how to interact with the DOM, this could be the easiest solution to achieve that goal:

    //the marker element
const marker = document.getElementById('marker');

//for each element having the class 'can-be-pinned'
[...document.getElementsByClassName('can-be-pinned')]
  .forEach(el => {        
    //adds the click event handler, that will...
    el.addEventListener('click', event=>{      
      //change the position of the marker according to the mouse coords
      marker.style.left =  `${event.clientX}px`;
      marker.style.top =  `${event.clientY}px`;            
    });        
  })
    #marker{
  position: absolute;
  width:20px;  
  border: solid 1px red;
}

.can-be-pinned{
  width: 50%;
  height: 50%;
}
    <div id="myDiv">
  <img class="can-be-pinned" src="http://placekitten.com/g/400/300" alt="">  
</div>

<img
    id="marker"     
    src="https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Marker-Outside-Chartreuse.png"
 >

    The marker is placed at the exact coords where the mouse has been clicked. I added a red border surrounding the marker to better show that behaviour. If you wished those coords to match with the exact center of the marker, you needed to compute its coords by subtracting its width/2 and height/2.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search