Question

我正在将json文件导入Google地图，以显示带有信息窗口的标记。 json项之一是对存储图像的href。我希望href显示为图像或链接到图像按钮，而不是文本。我试图将图像标签和html div放在infoWindow.setContent（）;中；根据一些没有用的答案。任何帮助或想法将不胜感激。

样本json

[
  {
    "lat":"50.90737498194628",
    "lng":"-114.10501346073356",
    "username":"Bill Someone",
    "role":"Incident Commander",
    "text":"Test message with photo attached",
    "image":"https://someimagepostImages%2FdU8vD3evV5mWOpbWRHq",
    "time":"2018/10/23 09:28:02am"
  }
]

map.js文件

function infoBox(map, marker, data) {
     var infoWindow = new google.maps.InfoWindow();
         google.maps.event.addListener(marker, "click", function(e) {
             infoWindow.setContent ('<b>name:&nbsp;&nbsp;</b>' + data.username + "<br />" + '<b>role:&nbsp;&nbsp;</b>' + data.role + "<br />" + '<b>message:&nbsp;&nbsp;</b>' + data.text + "<br />"  + '<b>time:&nbsp;&nbsp;</b>' + data.time + "<br />" + '<b>image:&nbsp;&nbsp;</b>' + data.image);
             infoWindow.open(map, marker);
         });

     (function(marker, data) {
       google.maps.event.addListener(marker, "click", function(e) {
         infoWindow.setContent ('<b>name:&nbsp;&nbsp;</b>' + data.username + "<br />" + '<b>role:&nbsp;&nbsp;</b>' + data.role + "<br />" + '<b>message:&nbsp;&nbsp;</b>' + data.text + "<br />"  + '<b>time:&nbsp;&nbsp;</b>' + data.time + "<br />" + '<b>image:&nbsp;&nbsp;</b>' + data.image);
         infoWindow.open(map, marker);
       });
     })(marker, data);
 }

Answer 1

您必须为此使用img标签或a标签。

infoWindow.setContent ('<b>name:&nbsp;&nbsp;</b>' + data.username + "<br />" +
'<b>role:&nbsp;&nbsp;</b>' + data.role + "<br />" + '<b>message:&nbsp;&nbsp;</b>' + 
data.text + "<br />"  + '<b>time:&nbsp;&nbsp;</b>' + data.time + "<br />" + 
'<b>image:&nbsp;&nbsp;</b><img src="' + data.image + '" >);

您可以在没有重大问题的情况下将HTML插入到infoWindow中。您还可以设置元素的样式。我建议您创建一个较小的div，使其元素的语义顺序更合理，而不要使用b标签。

在Google地图信息窗口中将href显示为图片

1 个答案: