Question

我正在使用谷歌地图API，我试图拥有一张＆＃34;卡＆＃34;单击标记时出现（与工具提示/信息框相对应）。我跟着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>');
    }
  });

（您可以看到我尝试将str2替换为实际的div ...我还试过没试过String()而没有使用＃{1}} ;或者工作）。我想知道是否有一种更好的方法，而不是简单地将字符串附加在一起以使该卡出现。

另外，如果有人可以解释$(".gm-style")那会是多么可爱。（经过大量谷歌搜索之后我的理解是它是document.getElementById的替代品，但是.gm-style是一个类名...而且任何替代品＃34;得到___由___＆＃34;函数我尝试只是导致错误）。

谢谢！

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放在样式表中，而不是直接将所有样式添加到元素中。

Answer 2

您可以通过获取元素outerHTML将元素转换为字符串。

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

顺便说一下，如果你使用jQuery为什么要将它作为字符串附加？使用

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

会奏效。

将JS中的div作为字符串追加（？）

2 个答案: