自定义谷歌地图javascript api 3信息窗口

我想对infowindow做三件事

如何将“我的信息”窗口中的“链接”文本更改为实际链接

如何向每个信息窗口添加图像

如何调整信息窗口的大小

以下是我的javascript：

函数initGmap（）{
变量位置=[
[“1塞文”，45.489886，-73.595116，“链接”]，
[“16格伦维尔”，45.486391，-73.607096，“链接”]，
[“17温彻斯特”，45.477646，-73.603917，“链接”]，
[“19温彻斯特”，45.477607，-73.603962，“链接”]，
[“52布鲁克菲尔德”，45.514604，-73.632722，“链接”]，
[“317 Chemin du Golf”，45.467418，-73.548665，“link”]，
[“319 Chemin du Golf”，45.467418，-73.548665，“link”]，
[“斯蒂芬山447号”，45.483900，-73.600203，“链接”]，
[“斯蒂芬山449号”，45.483933，-73.600179，“链接”]，
[“603兰斯顿”，45.484876，-73.609120，“链接”]，
[“649贝尔蒙特”，45.485654，-73.609270，“链接”]，
[“652罗斯林”，45.484788，-73.611407，“链接”]，
[“1235主教”，45.496458，-73.575373，“链接”]，
[“1355斯卡波罗”，45.523431，-73.639453，“链接”]，
[“科隆2184”，45.515823，-73.704550，“链接”]，
[“布鲁克菲尔德2302”，45.514738，-73.632688，“链接”]，
[“3013 De Breslay”，45.492288，-73.590195，“链接”]，
[“3019 De Breslay”，45.492092，-73.590437，“链接”]，
[“3021 Jean Girard”，45.493183，-73.590212，“链接”]，
[“3025 De Breslay”，45.492075，-73.590771，“链接”]，
[“4389德卡里”，45.480705，-73.620274，“链接”]
];
var map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
中心：新google.maps.LatLng（45.484876，-73.609120），
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误
});
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i

在这部分代码中

google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function () {
        infowindow.setContent("<div class='map-address'>" + locations[i][0] + "</div> <div class='map-link'>" + locations[i][3] + "</div>");
        infowindow.open(map, marker);
    }
})(marker, i));

google.maps.event.addListener（标记，'click'，（函数（标记，i）{
返回函数（）{
setContent（“+locations[i][0]+”+locations[i][3]+”）；
信息窗口。打开（地图、标记）；
}
})（marker，i））；

特别是在您的info.setContent（）上，也许您可以更改

 "<div class='map-link'>"  +  locations[i][3] + "</div>"

“”+位置[i][3]+“”

将来

 "<a href='"+  locations[i][3] +"' class='map-link'> Some text </a>"

“”

您还可以附加到它的基本html

"<img src='"+ someImageURL +"' alt="AnImage">"

“”

---

我希望这能有所帮助，如果您有任何其他问题，请告诉我；）

假设图像路径也位于

位置
数组中，如下所示：

var locations = [
    ["1 Severn", 45.489886, -73.595116, "link", "path/to/image.jpg"],
    ["16 Grenville", 45.486391, -73.607096, "link", "path/to/image.jpg"]
];

现在，您可以在标记单击侦听器中执行以下操作：

google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function () {

        var html = '';

        // Create a container for the infowindow content
        html += '<div class="infowindow-content">';

        // Add a link
        html += '<a href="' + locations[i][3] + '">Text of your link</a>';

        // Add an image
        html += '<img src="' + locations[i][4] + '" />';

        // Close the container
        html += '</div>';

        infowindow.setContent(html);
        infowindow.open(map, marker);
    }
})(marker, i));

编辑：下面的工作小提琴

我认为这不值得投反对票/反对票。您要添加到信息窗口的图像路径在哪里？错误使用了
”
引号和
“
双引号。是的，我很糟糕，我只是想解决这个问题，而不是让事情听起来更复杂。。。顺便说一句，即使我使用得不好，这段代码仍然有效。。。无论如何，谢谢你的反馈。这会有用的，没错。但给出更好的代码总是一件好事；）删除我的否决票，因为你给出了反馈。谢谢Upsidown先生。我是Javascript的初学者。我不确定是否应该将上述代码合并到当前脚本中或完全替换它。你能详细说明一下吗？当然。检查我编辑的答案。您可以用我的代码替换标记侦听器。CSS部分当然必须放在.CSS文件中或作为内联样式。我马上加一把小提琴，效果很好！非常感谢你。
.infowindow-content {

    width: 300px;
    padding: 10px;
    font-size: 10px;
}