谷歌地图从谷歌地图上的一个div内拖动pin

我有以下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>

这个图像是一个自定义的pin，我想把它拖到地图上，并得到与它相关的坐标。我已经设置了我的地图。我不知道（如果可能的话）如何从html标记中拖动静态图像并将其放在地图上，使其像大头针一样发挥作用。

我可以添加一个mraker:

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

我正试图复制这个例子(http://www.wolfpil.de/v3/drag-from-outside.html)但我得到了以下错误：

"无法读取null"的属性"offsetWidth"

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

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

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

代码中有更多注释

<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>

（听了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>

相关内容

最新更新

热门标签：