我们可以在Google地图V3上制作自定义叠加层吗？ [英] Can we make custom overlays draggable on google maps V3
问题描述
这些标记是可拖动的，但我不能在悬停点击等标记上有一个自定义div。因此我想使用自定义覆盖，但我无法确定自定义覆盖是否支持拖动。已经有了一个答案，但演示本身不起作用，
是的，我们可以。
我没有找到关于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
这篇关于我们可以在Google地图V3上制作自定义叠加层吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
