Question

我有以下HTML：

<div id="map-canvas"></div>
<div class="controls">
    <p>Zoom</p>
    <i class="icon-plus-sign"></i> 
    <i class="icon-minus-sign"></i>

    <div class="pinWrapper">
        <p>Drop your pin</p>
        <img src="https://cdn0.iconfinder.com/data/icons/20-flat-icons/128/location-pointer.png">
    </div>
</div>

图像是一个自定义图钉，我想在地图上拖动并获取与其相关的坐标。我设置了地图。我无法弄清楚（如果可能的话）如何从html标记内部拖动静态图像并将其放在地图上以使其像针一样起作用。

我可以添加一个mraker：

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"title here"
});

我正在尝试复制此示例（http://www.wolfpil.de/v3/drag-from-outside.html），但我收到以下错误：

'无法读取属性'offsetWidth'为null'

这是我的索引页面：http://jsfiddle.net/ud3p7m96/

Answer 1

您可以复制/粘贴此代码，它可以按原样运行。我做了什么：

我使用jQuery-UI Draggable。当客户端开始拖动时，我设置一个变量来记住鼠标在引脚上的位置。使用此值，您可以计算从鼠标位置到针脚上的活动点的距离（=底部中心）
当放下引脚时，我使用overlay.getProjection（）。fromContainerPixelToLatLng向Google询问与地图上某个位置（以像素为单位）对应的坐标

代码中有更多评论

<div id="map-canvas"></div>
<div class="controls">
    <p>Zoom</p>
    <i class="icon-plus-sign"></i> 
    <i class="icon-minus-sign"></i>

    <div class="pinWrapper">
        <p>Drop your pin</p>
        <img src="https://cdn0.iconfinder.com/data/icons/20-flat-icons/128/location-pointer.png">
    </div>
</div>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry,visualization,drawing,places&sensor=false"></script>
<script>
$(document).ready(function() {
  var mouseStartDrag=[0,0];
  var newMarker;
  var activePointPin = [47,128];  // = bottom center of the pin.  Change this value if the pin is changed

  // jQuery-UI draggable
  $('.pinWrapper img').draggable({
    start: function(event) {
      // this gives you the position of the mouse relative to the image.
      mouseStartDrag = [event.offsetX, event.offsetY];    
    },
    stop: function(event) {
      // we look at the mouse position, subtract it from the position of the map, so we get the mouse position over the map
      var coordinatesOverDiv = [event.clientX - $('#map-canvas').position().left, event.clientY - $('#map-canvas').position().top];
      // we don't want the mouse position, we want the position of the active point on the pin.
      coordinatesOverDiv = [
        coordinatesOverDiv[0] + activePointPin[0] - mouseStartDrag[0], 
        coordinatesOverDiv[1] + activePointPin[1] - mouseStartDrag[1]
      ];
      // ask Google to get the position, corresponding to a pixel on the map
      var pixelLatLng = overlay.getProjection().fromContainerPixelToLatLng( new google.maps.Point(coordinatesOverDiv[0], coordinatesOverDiv[1]) );
      // set a new marker
      newMarker = new google.maps.Marker({
        map: map,
        position: pixelLatLng
      });
      // set the pin back to its original position, @see http://stackoverflow.com/questions/15193640/jquery-ui-draggable-reset-to-original-pos
      $(this).animate({
          top: "0px",
          left: "0px"
      });

    }
  });
  initialize();
});
var map;
var overlay;

// Google Maps
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(50.5, 4.5),  // Over Belgium
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  // this overlay will be used to calculate mouse coordinates to Lat/Lng
  overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.setMap(map);
}
</script>
<style>
#map-canvas {
  height:400px;
}
</style>

Answer 2

（在听到Alex用这些标记计划的内容之后，我扩展了代码。现在它创建了那些标记的多边形）

<div id="map-canvas"></div>
<div class="controls">
    <p>Zoom</p>
    <i class="icon-plus-sign"></i> 
    <i class="icon-minus-sign"></i>

    <div class="pinWrapper">
        <p>Drop your pin</p>
        <img src="https://cdn0.iconfinder.com/data/icons/20-flat-icons/128/location-pointer.png">
    </div>
</div>
<hr>
<input type="button" id="make_polygon" value="Make Polygon">
<div id="points"></div>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry,visualization,drawing,places&sensor=false"></script>
<script>
$(document).ready(function() {
  var mouseStartDrag=[0,0];
  var newMarker;
  var activePointPin = [47,128];  // = bottom center of the pin.  Change this value if the pin is changed

  // jQuery-UI draggable
  $('.pinWrapper img').draggable({
    start: function(event) {
      // this gives you the position of the mouse relative to the image.
      mouseStartDrag = [event.offsetX, event.offsetY];    
    },
    stop: function(event) {
      // we look at the mouse position, subtract it from the position of the map, so we get the mouse position over the map
      var coordinatesOverDiv = [event.clientX - $('#map-canvas').position().left, event.clientY - $('#map-canvas').position().top];
      // we don't want the mouse position, we want the position of the active point on the pin.
      coordinatesOverDiv = [
        coordinatesOverDiv[0] + activePointPin[0] - mouseStartDrag[0], 
        coordinatesOverDiv[1] + activePointPin[1] - mouseStartDrag[1]
      ];
      // ask Google to get the position, corresponding to a pixel on the map
      var pixelLatLng = overlay.getProjection().fromContainerPixelToLatLng( new google.maps.Point(coordinatesOverDiv[0], coordinatesOverDiv[1]) );
      // set a new marker
      newMarker = new google.maps.Marker({
        map: map,
        position: pixelLatLng
      });
      // push the new marker in an array
      markers.push(newMarker);

      // display the coordinates.  Feel free to remove this, it's just display
      $('#points').append('<div>' + newMarker.position.lat() +','+ newMarker.position.lng() + '</div>');

      // set the pin back to its original position, @see http://stackoverflow.com/questions/15193640/jquery-ui-draggable-reset-to-original-pos
      $(this).animate({
          top: "0px",
          left: "0px"
      });

    }
  });
  // polygon
  $('#make_polygon').click(function() {
    var polygonPoints = [];
    for (var i=0; i<markers.length; i++) {    
      polygonPoints.push(new google.maps.LatLng( markers[i].position.lat(), markers[i].position.lng() ));
    }
    // Construct the polygon.
    myPolygon = new google.maps.Polygon({
      paths: polygonPoints,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    // put the polygon on the map
    myPolygon.setMap(map);
  });

  initialize();
});
var map;
var overlay;
var markers = [];

// Google Maps
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(50.5, 4.5),  // Over Belgium
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  // this overlay will be used to calculate mouse coordinates to Lat/Lng
  overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.setMap(map);
}
</script>
<style>
#map-canvas {
  height:400px;
}
</style>

谷歌地图拖动针在谷歌地图上的div内

2 个答案: