Javascript 多边形上的谷歌地图API信息信息框
我使用搜索,但答案找不到 我有谷歌地图API,我在其中公开多边形和标记。当点击标记,他打开信息窗口,在这个窗口中我有相同的文本和按钮。当我需要选择此文本时,我不能,因为当单击并移动鼠标时,单击鼠标悬停是移动地图 我无法启用EventPropagation:true,因为我在窗口中有一个按钮 我尝试z-index,但这个错误并没有被修复 ... 请帮助我,现场演示:Javascript 多边形上的谷歌地图API信息信息框,javascript,jquery,google-maps,google-maps-api-3,Javascript,Jquery,Google Maps,Google Maps Api 3,我使用搜索,但答案找不到 我有谷歌地图API,我在其中公开多边形和标记。当点击标记,他打开信息窗口,在这个窗口中我有相同的文本和按钮。当我需要选择此文本时,我不能,因为当单击并移动鼠标时,单击鼠标悬停是移动地图 我无法启用EventPropagation:true,因为我在窗口中有一个按钮 我尝试z-index,但这个错误并没有被修复 ... 请帮助我,现场演示: var映射选项={ 缩放:11, mapTypeId:google.maps.mapTypeId.ROADMAP, 中心:新goog
var映射选项={
缩放:11,
mapTypeId:google.maps.mapTypeId.ROADMAP,
中心:新google.maps.LatLng(41.7324592,44.8070955),
disableDefaultUI:true,
};
功能添加标记(id、图标、位置){
var marker=new google.maps.marker({
职位:pos,,
动画:google.maps.animation.DROP,
图标:图标
});
google.maps.event.addListener(标记,'click',函数(){
map.panToWithOffset(this.getPosition(),100,-100);
$.ajax({
url:'ajax/getObjectInfo',
键入:“POST”,
数据:{id:id},
成功:功能(数据){
markerData=$.parseJSON(数据);
var图像=“”;
var imagespath='/upload/object/photo/'+id+'/small/';
if(markerData.files!==未定义){
对于(var k=0;k\
面积:'+markerData.Area+' \
\
更多细节\
\
';
var图像=“”;
var imagespath='/upload/object/photo/'+id+'/small/';
if(markerData.files!==未定义){
对于(var k=1;k Nice map BTW!您到底为什么希望用户能够选择文本?您可以通过编程选择信息窗口中的单击上的所有文本。但是,当我在信息框中单击“更多详细信息”时按钮,单击action在多边形中执行它…您可以用基本问题设置一个JSFIDLE吗?它是启用事件传播:true,
它应该是false。易于复制->-将其设置为false不会影响closebutton。示例->带有启用事件传播:false的信息框和可单击按钮。
var mapOptions = {
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(41.7324592,44.8070955),
disableDefaultUI: true,
};
function addMarker(id,icon,pos) {
var marker = new google.maps.Marker({
position: pos,
animation: google.maps.Animation.DROP,
icon: icon
});
google.maps.event.addListener(marker,'click',function(){
map.panToWithOffset(this.getPosition(),100,-100);
$.ajax({
url: 'ajax/getObjectInfo',
type: 'POST',
data: {id: id},
success: function(data){
markerData = $.parseJSON(data);
var images = '';
var imagespath = '/uploaded/object/photo/' + id + '/small/';
if (markerData.files !== undefined) {
for (var k = 0; k < markerData.files.small.length; k++) {
images += '<img src="' + imagespath + markerData.files.small[k] + '">';
if (k == 1) break;
}
}
var w_content = '<div class="info-window" id="ib">\
<div class="title-s">'+markerData.price+' '+markerData.valuta_pref+'</div>\
<div class="feature-area">\
<ul class="info-feature-list">\
<li><span class="listtitle"><i class="icon-caret-right"></i>Area:</span> '+markerData.area+'</li>\
</ul>\
<button class="button moreinfo" data-id="' + id + '" style="margin-top:10px;"><i class="butoni icon-info-sign"></i> More Details</button>\
</div>\
<img alt="" src="assets/map_files/images/clip.png" class="clip-image">';
var images = '';
var imagespath = '/uploaded/object/photo/' + id + '/small/';
if (markerData.files !== undefined) {
for (var k = 1; k <= markerData.files.small.length; k++) {
images += '<div class="photo-frame'+k+'-s">\
<div class="labelplace1">\
<span class="label label-'+class_text_deal_type+'">Here Type</span>\
</div>\
<img class="photo-s" src="'+ imagespath + markerData.files.small[k-1] +'">\
</div>';
if (k == 2) break;
}
}
w_content += images + '</div>';
if (infowindow) {
infowindow.close();
};
infowindow = new InfoBox({
content: w_content,
disableAutoPan: true,
maxWidth: 400,
pixelOffset: new google.maps.Size(-230, -296),
closeBoxMargin: "-8px 0px 2px 2px",
closeBoxURL: "assets/map_files/images/close.png",
boxStyle: {
opacity: 1,
width: "400px"
},
infoBoxClearance: new google.maps.Size(400, 400),
isHidden: false,
MapPanes: "floatPane",
enableEventPropagation: true,
position: pos
});
infowindow.open(map,marker);
}
});
});
return marker;
}