分享程序员开发的那些事...
更新时间：2022-11-20 10:52:44
是的，我们可以。
我没有找到关于overlayView类的代码参考的任何内容。 b
$ b
DraggableOverlay.prototype = new google.maps.OverlayView（）;
DraggableOverlay.prototype.onAdd = function（）{
var container = document.createElement（'div'），
that = this;
$ b $ if（typeof this.get（'content'）。nodeName！=='undefined'）{
container.appendChild（this.get（'content'））;
else {
if（typeof this.get（'content'）==='string'）{
container.innerHTML = this.get（'content'） ;
}
else {
return;
}
}
container.style.position ='absolute';
container.draggable = true;
google.maps.event.addDomListener（this.get（'map'）。getDiv（），
'mouseleave'，
function（）{
google.maps.event .trigger（container，'mouseup'）;
}
）;
$ b google.maps.event.addDomListener（容器，
'mousedown'，
函数（e）{
this.style.cursor =' move';
that.map.set（'draggable'，false）;
that.set（'origin'，e）;
that.moveHandler =
google.maps.event.addDomListener（that.get（'map'）。getDiv（），$ b $'mousemove'，
function（e）{
var origin = that.get 'origin'），
left = origin.clientX-e.clientX，
top = origin.clientY-e.clientY，
pos = that.getProjection（）
.fromLatLngToDivPixel （that.get（'position'）），
latLng = that.getProjection（）
.fromDivPixelToLatLng（new google.maps.P oint（pos.x-left，
pos.y-top））;
that.set（'origin'，e）;
that.set（'position'，latLng）;
that.draw（）;
}）;
}
）;
google.maps.event.addDomListener（container，'mouseup'，function（）{
that.map.set（'draggable'，true）;
this.style .cursor ='default';
google.maps.event.removeListener（that.moveHandler）;
}）;
this.set（'container'，container）
this.getPanes（）。floatPane.appendChild（container）;
};
函数DraggableOverlay（map，position，content）{
if（typeof draw ==='function'）{
this.draw = draw;
}
this.setValues（{
position：position，
container：null，
content：content，
map：map
} ）;
}
DraggableOverlay.prototype.draw = function（）{
var pos = this.getProjection（）。fromLatLngToDivPixel（this.get '位置'））;
this.get（'container'）。style.left = pos.x +'px';
this.get（'container'）。style.top = pos.y +'px';
};
DraggableOverlay.prototype.onRemove = function（）{
this.get（'container'）。parentNode.removeChild（this.get（'container'））;
this.set（'container'，null）
};
它观察mousemove事件并根据距离修改叠加层的顶部/左侧样式从最后一个鼠标位置开始。
用法：
new DraggableOverlay（
map，// maps-instance
latLng，// google.maps.LatLng
'content'，// HTML-String or DOMNode
function（）{} //可选，用于绘制draw-method的函数
）;
默认叠加层的左上角将放置在通过的latLng -argument。
要应用自定义绘图，请使用构造函数的可选draw-argument。
演示： http://jsfiddle.net/doktormolle/QRuW8/ strong>
编辑：
此解决方案仅适用于谷歌版本3.27映射api。
在3.28版本中，对地图的可拖动选项进行了更改。
发行说明： https://developers.google.com/maps/documentation/javascript/releases#328
The markers are draggable, but I cannot have a custom div on a marker which changes on hover click etc. hence I thought of using custom overlays, but I am not able to find out if custom overlay support drag. There is already an answer to this, but the demo itself does not work,
how to make a Custom Overlays draggable using google-maps v3
I didn't find anything on code reference for overlayView class.
Yes, we can.
DraggableOverlay.prototype = new google.maps.OverlayView();
DraggableOverlay.prototype.onAdd = function() {
var container=document.createElement('div'),
that=this;
if(typeof this.get('content').nodeName!=='undefined'){
container.appendChild(this.get('content'));
}
else{
if(typeof this.get('content')==='string'){
container.innerHTML=this.get('content');
}
else{
return;
}
}
container.style.position='absolute';
container.draggable=true;
google.maps.event.addDomListener(this.get('map').getDiv(),
'mouseleave',
function(){
google.maps.event.trigger(container,'mouseup');
}
);
google.maps.event.addDomListener(container,
'mousedown',
function(e){
this.style.cursor='move';
that.map.set('draggable',false);
that.set('origin',e);
that.moveHandler =
google.maps.event.addDomListener(that.get('map').getDiv(),
'mousemove',
function(e){
var origin = that.get('origin'),
left = origin.clientX-e.clientX,
top = origin.clientY-e.clientY,
pos = that.getProjection()
.fromLatLngToDivPixel(that.get('position')),
latLng = that.getProjection()
.fromDivPixelToLatLng(new google.maps.Point(pos.x-left,
pos.y-top));
that.set('origin',e);
that.set('position',latLng);
that.draw();
});
}
);
google.maps.event.addDomListener(container,'mouseup',function(){
that.map.set('draggable',true);
this.style.cursor='default';
google.maps.event.removeListener(that.moveHandler);
});
this.set('container',container)
this.getPanes().floatPane.appendChild(container);
};
function DraggableOverlay(map,position,content){
if(typeof draw==='function'){
this.draw=draw;
}
this.setValues({
position:position,
container:null,
content:content,
map:map
});
}
DraggableOverlay.prototype.draw = function() {
var pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
this.get('container').style.left = pos.x + 'px';
this.get('container').style.top = pos.y + 'px';
};
DraggableOverlay.prototype.onRemove = function() {
this.get('container').parentNode.removeChild(this.get('container'));
this.set('container',null)
};
It observes the mousemove-event and modifies the top/left-style of the overlay based on the distance from the last mouse-position.
Usage:
new DraggableOverlay(
map,//maps-instance
latLng,//google.maps.LatLng
'content',//HTML-String or DOMNode
function(){}//optional, function that ovverrides the draw-method
);
The top-left-corner of the overlay by default will be placed at the position provided via the latLng-argument.
To apply a custom drawing use the optional draw-argument of the constructor .
Demo: http://jsfiddle.net/doktormolle/QRuW8/
Edit: This solution will only work up to version 3.27 of the google maps api. Within the release of 3.28 there were changes made on the draggable option of the map.
Release Notes: https://developers.google.com/maps/documentation/javascript/releases#328