Javascript 自定义信息窗口：将箭头移到左侧，第一次单击不起作用

我正在使用“定制谷歌地图信息窗口的5种方法” （此处代码：）

第一次单击标记时，窗口会打开，但箭头不会向左移动（这不是一直出现，而是经常出现）

开始第二次单击，它的位置正确，如JS中所述：

// Moves the arrow 76px to the left margin.
iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

下面是问题的图片

下面是正确应用style属性时它如何工作的图片

有没有办法解决这个问题

谢谢大家!

编辑：这是代码

HTML

JAVASCRIPT

/*
 * 5 ways to customize the Google Maps infowindow
 * 2015 - en.marnoto.com
 * http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html
*/

// map center
var center = new google.maps.LatLng(40.589500, -8.683542);

// marker position
var factory = new google.maps.LatLng(40.589500, -8.683542);

function initialize() {
  var mapOptions = {
    center: center,
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

  // InfoWindow content
  var content = '<div id="iw-container">' +
                    '<div class="iw-title">Porcelain Factory of Vista Alegre</div>' +
                    '<div class="iw-content">' +
                      '<div class="iw-subTitle">History</div>' +
                      '<img src="http://maps.marnoto.com/en/5wayscustomizeinfowindow/images/vistalegre.jpg" alt="Porcelain Factory of Vista Alegre" height="115" width="83">' +
                      '<p>Founded in 1824, the Porcelain Factory of Vista Alegre was the first industrial unit dedicated to porcelain production in Portugal. For the foundation and success of this risky industrial development was crucial the spirit of persistence of its founder, José Ferreira Pinto Basto. Leading figure in Portuguese society of the nineteenth century farm owner, daring dealer, wisely incorporated the liberal ideas of the century, having become "the first example of free enterprise" in Portugal.</p>' +
                      '<div class="iw-subTitle">Contacts</div>' +
                      '<p>VISTA ALEGRE ATLANTIS, SA<br>3830-292 Ílhavo - Portugal<br>'+
                      '<br>Phone. +351 234 320 600<br>e-mail: geral@vaa.pt<br>www: www.myvistaalegre.com</p>'+
                    '</div>' +
                    '<div class="iw-bottom-gradient"></div>' +
                  '</div>';

  // A new Info Window is created and set content
  var infowindow = new google.maps.InfoWindow({
    content: content,

    // Assign a maximum value for the width of the infowindow allows
    // greater control over the various content elements
    maxWidth: 350
  });

  // marker options
  var marker = new google.maps.Marker({
    position: factory,
    map: map,
    title:"Porcelain Factory of Vista Alegre"
  });

  // This event expects a click on a marker
  // When this event is fired the Info Window is opened.
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });

  // Event that closes the Info Window with a click on the map
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  // *
  // START INFOWINDOW CUSTOMIZE.
  // The google.maps.event.addListener() event expects
  // the creation of the infowindow HTML structure 'domready'
  // and before the opening of the infowindow, defined styles are applied.
  // *
  google.maps.event.addListener(infowindow, 'domready', function() {

    // Reference to the DIV that wraps the bottom of infowindow
    var iwOuter = $('.gm-style-iw');

    /* Since this div is in a position prior to .gm-div style-iw.
     * We use jQuery and create a iwBackground variable,
     * and took advantage of the existing reference .gm-style-iw for the previous div with .prev().
    */
    var iwBackground = iwOuter.prev();

    // Removes background shadow DIV
    iwBackground.children(':nth-child(2)').css({'display' : 'none'});

    // Removes white background DIV
    iwBackground.children(':nth-child(4)').css({'display' : 'none'});

    // Moves the infowindow 115px to the right.
    iwOuter.parent().parent().css({left: '115px'});

    // Moves the shadow of the arrow 76px to the left margin.
    iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

    // Moves the arrow 76px to the left margin.
    iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

    // Changes the desired tail shadow color.
    iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'});

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'});

    // If the content of infowindow not exceed the set maximum height, then the gradient is removed.
    if($('.iw-content').height() < 140){
      $('.iw-bottom-gradient').css({display: 'none'});
    }

    // The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value.
    iwCloseBtn.mouseout(function(){
      $(this).css({opacity: '1'});
    });
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

/*
*定制谷歌地图信息窗口的5种方法
*2015年-en.marnoto.com
* http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html
*/
//地图中心
var center=new google.maps.LatLng（40.589500，-8.683542）；
//标记位置
var factory=new google.maps.LatLng（40.589500，-8.683542）；
函数初始化（）{
变量映射选项={
中心:中心,，
缩放：16，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
//信息窗口内容
变量内容=“”+
“维斯塔阿雷格里陶瓷厂”+
'' +
“历史”+
'' +
1824年成立的Vista AlEGRE瓷厂是葡萄牙第一个致力于瓷器生产的工业单位。这一危险的工业发展的基础和成功，是其创始人费雷拉-帕托-巴斯托坚持不懈的精神。十九世纪葡萄牙学会领袖人物农场主，大胆的商人，明智地吸收了本世纪的自由主义思想，成为葡萄牙“第一个自由企业的典范”。
'+
“联系人”+
“维斯塔阿雷格里亚特兰蒂斯，南非
3830-292Í拉沃-葡萄牙
”+
“
电话+351230600
电子邮件：geral@vaa.pt
www:www.myvistaalegre.com
'+
'' +
'' +
'';
//将创建一个新的信息窗口并设置内容
var infowindow=new google.maps.infowindow({
内容:内容,，
//为信息窗口的宽度指定最大值
//更好地控制各种内容元素
最大宽度：350
});
//标记选项
var marker=new google.maps.marker({
职位：工厂，
地图：地图，
标题：“维斯塔阿雷格里陶瓷厂”
});
//此事件要求单击标记
//触发此事件时，信息窗口打开。
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
//通过单击地图关闭信息窗口的事件
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
// *
//启动信息窗口自定义。
//google.maps.event.addListener（）事件
//创建infowindow HTML结构“domready”
//在打开信息窗口之前，将应用已定义的样式。
// *
google.maps.event.addListener（infowindow，'domready'，function（）{
//对包装信息窗口底部的DIV的引用
var-iwOuter=$（'.gm-style-iw'）；
/*因为这个div位于.gm div样式iw之前的位置。
*我们使用jQuery并创建一个iwBackground变量，
*并使用.prev（）利用了上一个div的现有引用.gm样式iw。
*/
var iwBackground=iwOuter.prev（）；
//删除背景阴影DIV
children（':nth child（2）'）.css（{'display'：'none'}）；
//删除白色背景DIV
children（':nth child（4）'）.css（{'display'：'none'}）；
//将信息窗口115px向右移动。
css（{左：'115px'}）；
//将箭头76px的阴影移到左边距。
children（':nth child（1）'）.attr（'style'，function（i，s）{returns s+'left:76px！important；'}）；
//将箭头76px移到左边距。
children（':nth child（3）'）.attr（'style'，function（i，s）{returns s+'left:76px！important；'}）；
//更改所需的尾部阴影颜色。
iwBackground.children（':nth child（3）'）.find（'div'）.children（）.css（{'box-shadow'：'rgba（72181233，0.6）0px 1px 6px'，'z-index'：'1'）；
//引用对关闭按钮元素进行分组的div。
var iwCloseBtn=iwOuter.next（）；
//将所需效果应用于关闭按钮
css（{opacity:'1'，right:'38px'，top:'3px'，border:'7px solid#48b5e9'，'border radius'：'13px'，'box shadow'：'05px#3990B9'}）；
//如果infowindow的内容未超过设置的最大高度，则删除渐变。
如果（$（'.iw content'）.height（）<140）{
$（'.iw bottom gradient'）.css（{display:'none'}）；
}
//在mouseout事件后，API会自动对按钮应用0.7不透明度。此函数将此事件反转为所需的值。
iwCloseBtn.mouseout（函数（）{
$（this.css（{opacity:'1'}）；
});
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

尝试信息窗口的像素偏移

例如：我将整个信息窗口移动到标记的右侧：

var infowindow = new google.maps.InfoWindow({
    content: $marker.html(),
    pixelOffset: new google.maps.Size(175, 114),
    maxWidth: '290',
  });

像素偏移等于maxWidth的一半，是标记图标高度的两倍

然后我也改变了这一行：

// Moves the infowindow to the right.
    iwOuter.parent().parent().css({left: '0px', top: '0px'});

因此，左上角将与标记图标的右侧对齐，并在CSS中对齐：

.gm-style .gm-style-iw{
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

我还交换了arrow thingy-在标记包装中添加了一个额外的div，它具有以下样式：

.marker-arrow {
  position: absolute;
  left: -30px;
  top: 0;
  width: 30px;
  background: transparent;
  border-top: 12px solid transparent;
  border-right: 20px solid #ffffff;
  border-bottom: 12px solid transparent;
  height: 24px;
}

此外，我更改了箭头的样式，因此它不会出现在任何可见的地方：

// Moves the shadow of the arrow to the left.
iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 0px !important; top: 0px !important;'});

// Moves the arrow to the left.
iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 0px !important; top: 0px !important;'});

// Changes the desired tail shadow color.
iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'unset', 'z-index' : '0', 'background' : 'transparent'});

---

希望有帮助；-）

你能把你的密码寄出去吗？否则我不能给你一个解决方案OK，我用代码编辑，完全一样：codepen.io/Mar

.marker-arrow {
  position: absolute;
  left: -30px;
  top: 0;
  width: 30px;
  background: transparent;
  border-top: 12px solid transparent;
  border-right: 20px solid #ffffff;
  border-bottom: 12px solid transparent;
  height: 24px;
}

// Moves the shadow of the arrow to the left.
iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 0px !important; top: 0px !important;'});

// Moves the arrow to the left.
iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 0px !important; top: 0px !important;'});

// Changes the desired tail shadow color.
iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'unset', 'z-index' : '0', 'background' : 'transparent'});