javascript - 在 JS 中附加 div 作为字符串(？)

Question

我正在使用 Google Maps API，我试图在点击标记时显示一张“卡片”(与工具提示/信息框相对)。我关注了this让卡片出现。然而，这个人使用的方法是附加一个巨大的字符串，它是一个白框的 html，所有链接/信息都硬编码到这个字符串中。

我正在尝试对其进行更改，以便它可以动态插入所需的信息(我已经删除了卡片的代码，因此在单击标记时它只显示一个灰色框，您可以看到代码 here ).

代码的重要部分是:`

google.maps.event.addDomListener(marker, 'click', function() {

    // Prevents card from being added more than once (i.e. when page is resized and google maps re-renders)
    if ( $( ".place-card" ).length === 0 ) {

      var rootDiv = document.createElement('div');
      rootDiv.style = ('position', 'absolute');
      rootDiv.style = ('right', '0px');
      rootDiv.style = ('top', '0px');

      var secondDiv = document.createElement('div');
      secondDiv.style = ('margin', '10px');
      secondDiv.style = ('padding', '1px');
      secondDiv.style = ('-webkit-box-shadow', 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px');
      secondDiv.style = ('box-shadow', 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px');
      secondDiv.style = ('border-radius', '2px');
      secondDiv.style = ('background-color', 'white');
      secondDiv.style = ('width', '200px');
      secondDiv.style = ('height', '150px');


      rootDiv.appendChild(secondDiv);

      // this does not work
      // $(".gm-style").append(rootDiv);

      // this works
      $(".gm-style").append('<div style="position: absolute; right: 0px; top: 0px;"><div style="margin: 10px; padding: 1px; -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; border-radius: 2px; background-color: white; width: 200px; height: 150px"></div></div>');
    }
  });

(你可以看到我正在尝试用实际的 div 替换 str2...我也尝试过不调用 String() 这不会工作)。我想知道是否有比简单地将字符串附加在一起以显示这张卡片更好的方法。

此外，如果有人可以解释 $(".gm-style") 的作用，那就太好了。 (经过多次谷歌搜索后我的理解是它是 document.getElementById 的替代方案，但是 .gm-style 是一个类名......以及任何替代“get___by___”函数我尝试只是导致错误)。

谢谢!

Answer 1

可以将元素的 HTML 代码作为字符串获取，但这毫无意义。追加字符串只会重新创建元素。

只需附加您拥有的元素:

$(".gm-style").append(rootDiv);

您设置样式的代码都是错误的。像 ('position', 'absolute') 这样的表达式使用逗号表达式，所以它的值只是字符串 'absolute'。将该字符串分配给样式不起作用，您可以使用样式对象的属性:

var rootDiv = document.createElement('div');
rootDiv.style.position = 'absolute';
rootDiv.style.right = '0px';
rootDiv.style.top = '0px';

var secondDiv = document.createElement('div');
secondDiv.style.margin = '10px';
secondDiv.style.padding = '1px';
secondDiv.style.webkitBoxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
secondDiv.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
secondDiv.style.borderRadius = '2px';
secondDiv.style.backgroundColor = 'white';
secondDiv.style.width = '200px';
secondDiv.style.height = '150px';

但是，我建议您将 CSS 放在样式表中，而不是将所有样式直接添加到元素中。