admin管理员组文章数量:1429075
i want to create marker on google map through dragging marker image from outside the map canvas and drop it inside the canvas, i've registered dom event listener of google maps but inside the listener i have no access to latLng object, how do i find the latLng of dropping point?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Active Users</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=";sensor=false"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="big_wrapper">
<div id="gmap_canvas" ondragover="allowDrop(event)"></div>
<div id="controls">
<div class="mand">
Coordinates: <br />
<input type="text" id="lat" value="33.718629" /><br />
<input type="text" id="lng" value="73.059082" /><br />
<input type="button" value="Go" id="go" />
</div>
<div class="mand">
Markers: <br />
<img src="img/marker.png" id="draggable" draggable="true" ondragstart="drag(event)" />
</div>
<div class="mand" id="debug">
</div>
</div>
</div>
</body>
<html>
and here is my javascript code
var geocoder;
var map;
$(function() {
$("#go").click(function()
{
map.setCenter(new google.maps.LatLng($("#lat").val(), $("#lng").val()));
});
});
function initialize() {
// prepare Geocoder
geocoder = new google.maps.Geocoder();
var myLatlng = new google.maps.LatLng(33.718629,73.059082);
var myOptions = { // default map options
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
mapDiv = document.getElementById('gmap_canvas');
google.maps.event.addListener(map, 'dragend', function(event)
{
document.getElementById('lat').value = map.getCenter().lat();
document.getElementById('lng').value = map.getCenter().lng();
});
google.maps.event.addListener(map, 'click', function(e)
{
alert(e.latLng);
});
google.maps.event.addDomListener(mapDiv, 'drop', function(event)
{
alert(event);
google.maps.event.trigger(map, 'click');
});
}
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
alert(ev.latLng);
}
// initialization
google.maps.event.addDomListener(window, 'load', initialize);
i want to create marker on google map through dragging marker image from outside the map canvas and drop it inside the canvas, i've registered dom event listener of google maps but inside the listener i have no access to latLng object, how do i find the latLng of dropping point?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Active Users</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.google./jsapi"></script>
<script type="text/javascript" src="http://maps.googleapis./maps/api/js?libraries=maps&sensor=false"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="big_wrapper">
<div id="gmap_canvas" ondragover="allowDrop(event)"></div>
<div id="controls">
<div class="mand">
Coordinates: <br />
<input type="text" id="lat" value="33.718629" /><br />
<input type="text" id="lng" value="73.059082" /><br />
<input type="button" value="Go" id="go" />
</div>
<div class="mand">
Markers: <br />
<img src="img/marker.png" id="draggable" draggable="true" ondragstart="drag(event)" />
</div>
<div class="mand" id="debug">
</div>
</div>
</div>
</body>
<html>
and here is my javascript code
var geocoder;
var map;
$(function() {
$("#go").click(function()
{
map.setCenter(new google.maps.LatLng($("#lat").val(), $("#lng").val()));
});
});
function initialize() {
// prepare Geocoder
geocoder = new google.maps.Geocoder();
var myLatlng = new google.maps.LatLng(33.718629,73.059082);
var myOptions = { // default map options
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
mapDiv = document.getElementById('gmap_canvas');
google.maps.event.addListener(map, 'dragend', function(event)
{
document.getElementById('lat').value = map.getCenter().lat();
document.getElementById('lng').value = map.getCenter().lng();
});
google.maps.event.addListener(map, 'click', function(e)
{
alert(e.latLng);
});
google.maps.event.addDomListener(mapDiv, 'drop', function(event)
{
alert(event);
google.maps.event.trigger(map, 'click');
});
}
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
alert(ev.latLng);
}
// initialization
google.maps.event.addDomListener(window, 'load', initialize);
1 Answer
Reset to default 6I've solve this problem by creating an empty OverlayView to have access to the MapCanvasProjection.fromContainerPixelToLatLng(Point) function.
Here is a piece of code you can just add in yours :
/**
* initialize a empty overlay used to pute latlng from pixel
*/
function initOverlay() {
function DropOverlay(map) {
this.setMap(map);
}
DropOverlay.prototype = new google.maps.OverlayView();
DropOverlay.prototype.onAdd = function() { /* Nothing to add */ };
DropOverlay.prototype.onRemove = function() { /* Nothing to remove */ };
DropOverlay.prototype.draw = function() { /* Nothing to draw */ };
DropOverlay.prototype.fromPixelToLatLng = function(x, y) {
var offset = divOffset(map.getDiv());
return this.getProjection().fromContainerPixelToLatLng(new google.maps.Point(x - offset.x, y - offset.y));
}
return new DropOverlay(map);
}
/**
* pute absolute position on page of a DOM element
*/
function divOffset(div) {
var offset = {x:0, y:0};
do {
offset.x += div.offsetLeft;
offset.y += div.offsetTop;
} while(div = div.offsetParent);
return offset;
}
Then you can call var overlay = initOverlay() in your in initialize() function. And use overlay.fromPixelToLatLng() to get le LatLng in your drop() function.
I hope this will help you. Or someone else landing on this page.
本文标签： javascriptDrag and drop marker in google mapsStack Overflow
版权声明：本文标题：javascript - Drag and drop marker in google maps - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745467946a2659615.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论