javascript - 谷歌地图中带有 Html 的 InfoWindow

Question

我正在使用以下代码为地图中的标记创建一个信息窗口。在消息变量中，我正在发送一个带有 Html 的字符串。当我在信息框中运行我的应用程序时，我得到的字符串没有 Html 样式。例如在盒子里面我看到等等等等等等……有谁知道如何获得带有html样式的信息框？

 function attachSecretMessage(marker, number) {

         var infowindow  = new google.maps.InfoWindow(
      { content: message[number],
          size: new google.maps.Size(50, 50)
      });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map1, marker);
      });

Answer 1

将所有自定义 html 代码放在一个变量中，并将值分配给“内容”！！！

    var contentString = 
                '<div id="content" style="width:400px; background-color:red;">' +
                'My Text comes here' + 
                '</div>';

   var infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 400
        });

Answer 2

代替 infoWindow 试试infoBox这个可以风格化

Answer 3

在地图中显示用户提交的地址是很常见的，所以这里要小心 XSS 攻击。这是我公司的安全审计人员发现的漏洞之一。

有人很容易提交这样的地址：

<img src onerror=alert('hello, I'm hacking you!') />

尽管像 React 这样的框架通常可以保护您免受这些框架的影响，但这些 3rd 方库可能不会！