自定义 google 地图 javascript api 3 条信息 window

Question

我想对信息做三件事window。

如何将我的信息 window 中的 "link" 文本更改为实际的 link。
如何为每个信息添加图片window
如何调整信息的大小window

这是我的 javascript：

<!--Google Maps Script-->
<script type="text/javascript">
    function initGmap() {

        var locations = [
            ["1 Severn", 45.489886, -73.595116, "link"],
            ["16 Grenville", 45.486391, -73.607096, "link"],
            ["17 Winchester", 45.477646, -73.603917, "link"],
            ["19 Winchester", 45.477607, -73.603962, "link"],
            ["52 Brookfield", 45.514604, -73.632722, "link"],
            ["317 Chemin du Golf", 45.467418, -73.548665, "link"],
            ["319 Chemin du Golf", 45.467418, -73.548665, "link"],
            ["447 Mt. Stephen", 45.483900, -73.600203, "link"],
            ["449 Mt. Stephen", 45.483933, -73.600179, "link"],
            ["603 Lansdowne", 45.484876, -73.609120, "link"],
            ["649 Belmont", 45.485654, -73.609270, "link"],
            ["652 Roslyn", 45.484788, -73.611407, "link"],
            ["1235 Bishop", 45.496458, -73.575373, "link"],
            ["1355 Scarboro", 45.523431, -73.639453, "link"],
            ["2184 De Cologne", 45.515823, -73.704550, "link"],
            ["2302 Brookfield", 45.514738, -73.632688, "link"],
            ["3013 De Breslay", 45.492288, -73.590195, "link"],
            ["3019 De Breslay", 45.492092, -73.590437, "link"],
            ["3021 Jean Girard", 45.493183, -73.590212, "link"],
            ["3025 De Breslay", 45.492075, -73.590771, "link"],
            ["4389 Decarie", 45.480705, -73.620274, "link"]
        ];

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: new google.maps.LatLng(45.484876, -73.609120),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                title: locations[i][0],
                map: map
            });

            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));
        }
    }
</script>

<script async="" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYbVG7Y7MqGw-OWkH2HW0RQlHtMO_bfoc&callback=initGmap"></script>
<!--End Google Maps Script-->

Answer 1

在这部分代码中，

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));

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

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

成为

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

你也可以附加基本的 html

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

希望这对您有所帮助，如果您有任何其他问题，请告诉我 ;)

Answer 2

假设您的图片路径也在您的 locations 数组中，如下所示：

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));

现在您有一个带有 class .infowindow-content 的容器，您可以使用 CSS 设置样式。例如：

.infowindow-content {

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

编辑：下面的工作fiddle

JSFiddle demo

自定义 google 地图 javascript api 3 条信息 window

customize google maps javascript api 3 info window

javascript

google-maps-api-3