Question

我有一个页面，我有一个可以使用RxJS拖动的小人物。当拖动结束时，如果它在页面上的谷歌地图上结束，我想在人员被放入纬度和经度的点处转换鼠标坐标。

我已经从SO和网络上的其他地方发现/拼凑了这个实现。

function pixelOffsetToLatLng(map, offsetx, offsety) {
        var mapZoom = map.getZoom();
        var scale = Math.pow(2, mapZoom);
        var mapCenter = map.getCenter();

        var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(mapCenter);
        var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0);

        var worldCoordinateNewCenter = new google.maps.Point(
            worldCoordinateCenter.x - pixelOffset.x,
            worldCoordinateCenter.y + pixelOffset.y
        );

        var latLngPosition = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);

        return latLngPosition;
      }

但它给出的结果不正确。它似乎对地球上的位置和缩放水平特别敏感。

我已经在下面添加了一个代码段，其中间位于0,0附近有一个标记。如果您反复将人放在标记上并缩小，则您会看到lat，lng的值随着缩放级别而显着变化。我不明白为什么......

提前致谢！

＆＃13;

//adapted from here https://gist.github.com/mattpodwysocki/2156153
//this is an RXJS drag and drop implementation. It is used below to provide screen coordinates to Google Maps
(function(dragger) {
  'use strict';

  dragger.init = function() {
    var dragTarget = $('#dragTarget');
    // Get the three major events
    window.dragger.mouseup = dragTarget.onAsObservable('mouseup');
    window.dragger.mousemove = dragTarget.onAsObservable('mousemove');
    window.dragger.mousedown = dragTarget.onAsObservable('mousedown').select(function(event) {
      // calculate offsets when mouse down
      event.preventDefault();
      return {
        left: event.clientX - dragTarget.offset().left,
        top: event.clientY - dragTarget.offset().top
      };
    });

    // Combine mouse down with mouse move until mouse up
    window.dragger.mousedrag = window.dragger.mousedown.selectMany(function(offset) {
      return window.dragger.mousemove.select(function(pos) {
        // calculate offsets from mouse down to mouse moves
        return {
          left: pos.clientX - offset.left,
          top: pos.clientY - offset.top
        };
      }).takeUntil(window.dragger.mouseup);
    });

    window.dragger.mousedrag.subscribe(function(pos) {
      // Update position
      dragTarget.css({
        top: pos.top,
        left: pos.left
      });
    });

    window.dragger.mousedown.subscribe(function() {
      $('#dragTarget #person').hide();
      $('#dragTarget #shopper').show();
    });

    window.dragger.mouseup.subscribe(function(pos) {
      $('#dragTarget #person').show();
      $('#dragTarget #shopper').hide();
      $('aside ul').append($('<li>').append('shopper dropped at <br/>x:' + pos.clientX + ' and y:' + pos.clientY));
    });
  };
}(window.dragger = window.dragger || {}));
window.dragger.init();

(function(gmaps) {
  'use strict';

  //a function cobbled together from elsewhere on StackOverflow to convert from page coordinates 
  //to a latitude and longitude
  function pixelOffsetToLatLng(map, offsetx, offsety) {
    var mapZoom = map.getZoom();
    var scale = Math.pow(2, mapZoom);
    var mapCenter = map.getCenter();

    var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(mapCenter);
    var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0);

    var worldCoordinateNewCenter = new google.maps.Point(
        worldCoordinateCenter.x - pixelOffset.x,
        worldCoordinateCenter.y + pixelOffset.y
    );

    var latLngPosition = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);

    return latLngPosition;
  }

  gmaps.init = function() {
    //setup a map centered on 0,0
    var mapCanvas = $('#map');
    var mapOptions = {
      center: new google.maps.LatLng(0, 0),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(mapCanvas[0], mapOptions);
    
    //put a marker nearby as a reference point
    var marker = new google.maps.Marker({
      position: new google.maps.Marker({lat:0.001, lng:0.001}),
      map: map,
      title: '0.001, 0.001'
    });
    
    //run this function every time the draggable person is dropped
    window.dragger.mouseup.subscribe(function(pos) {
      var ll = pixelOffsetToLatLng(map, pos.pageX, pos.pageY);
      $('aside ul').append($('<li>').append('shopper dropped at <br/>lat:' + ll.lat() + ' and y:' + ll.lng()));
    });
  };
}(window.gmaps = window.gmaps || {}));

window.gmaps.init();

＆＃13;

#dragTarget {
  position:absolute;
  z-index: 999;
}

.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

#map {
  height:400px;
  width:400px;
  float:left;
  background-color:lightyellow;
  }

aside {
    height:400px;
  width:200px;
  float:right;
  background-color:lightgrey;
  }

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs-jquery/1.1.6/rx.jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>

<div class="grabbable fa fa-2x fa-female" id="dragTarget"></div>
<div id="map"></div>
<aside><ul></ul></aside>

＆＃13;

根据鼠标坐标从

0 个答案: