需要帮助来为Google地图的信息窗口创建可点击的网址链接

时间:2019-03-28 20:08:28

标签: javascript

我无法为Google Map的信息窗口创建可点击的URL链接。我确定这是语法错误,只是不确定确切位置。

这是我的代码段

                  var marker = new google.maps.Marker({
                      map: map,
                      title: eventName,
                      position: loc
                        });
                        var content =
                            "<strong>" + "@location.venue_name" + "</strong><br>" +
                            "@location.venue_address" + " " + "@location.city_name" + "<br>" +
                            "@location.description" + "<br>" +

                            "@location.url" +  "<br>" + //displays url eg. 'www.google.com'

                            //"<a href=" + "@location.url" + "target="_blank">More Details</a><br>";  // map won't show if this line is uncommented 

                        var infowindow = new google.maps.InfoWindow();
                        google.maps.event.addListener(marker, 'click', (function (marker, content) {
                            return function () {
                                infowindow.setContent(content);
                                infowindow.open(map, marker);
                            };
                        })(marker, content));

提前谢谢

3 个答案:

答案 0 :(得分:0)

语法在内容变量上有点混乱。

如下更改您的行

<a href='" + "@location.url" + "' target='_blank'>More Details</a><br>"

还介绍了js的模板文字,使用“`”(反引号)可以使您的代码更具可读性

var content = `<strong>${@location.venue_name}</strong>
               <br>
               ${@location.venue_address} ${@location.city_name} ${@location.url}
               <a href='${@location.url}' target='_blank'>More details</a>
              `

这样,您可以避免尝试构建字符串时出现的混乱情况。 ${}将允许您将Js变量放在反引号字符串内。

答案 1 :(得分:0)

请尝试以下操作:

var content =
    "<strong>" + "@location.venue_name" + "</strong><br>" +
    "@location.venue_address" + " " + "@location.city_name" + "<br>" +
    "@location.description" + "</div>" +
    "@location.url" +  "<br>" +
    "<a href='" + "@location.url" + "' target='_blank'>More Details</a><br>";

注意,我在最后一行更改了引号。希望对您有帮助

答案 2 :(得分:0)

最好是一个字符串:

"<a href='@location.url' target='_blank'>More Details</a><br>"

那对眼睛来说更容易

非常确定@ ...注入也可以在更长的字符串中使用