Question

我正在使用庞大的图像链接数据库制作谷歌地图应用程序。我在谈论数据库中的数千条记录。现在我需要的是在点击标记后将图像加载到infoWindow中。因为考虑标记的数量并加载每个单个图像需要花费大量时间并使我的应用程序无法使用。让我们以谷歌文档中的更新代码为例：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 2,
            center: {lat: -33.865427, lng: 151.196123},
            mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');

        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);

    }
    var marker;

    function eqfeed_callback(results) {
        var heatmapData = [];
        for (var i = 0; i < results.features.length; i++) {
            var coords = results.features[i].geometry.coordinates;
            var latLng = new google.maps.LatLng(coords[1], coords[0]);
            heatmapData.push(latLng);

            if(i%2==0){
                var contentString =
                    '<div class="photo">' +
                    '<IMG BORDER="0" ALIGN="Left" width="150px" height="100px" SRC="https://f4.bcbits.com/img/0008736837_10.jpg">'   +
                    '</div>';
            }
            else{
                var contentString =
                    '<div class="photo">' +
                    '<IMG BORDER="0" ALIGN="Left" width="150px" height="100px" SRC="https://www.drupal.org/files/ship-hires.jpeg">'   +
                    '</div>';
            }


            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            marker = new google.maps.Marker({
                map: map,
                position: latLng
            });

            addListener(marker,map,infowindow);
        }
        var heatmap = new google.maps.visualization.HeatmapLayer({
            data: heatmapData,
            dissipating: false,
            map: map
        });

        function addListener(marker,map,infowindow) {
            marker.addListener('click', function() {
                infowindow.open(map, marker);
            });
        }

    }
</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAq3U7rLNpim50Qk_zbq9mur8VFLAeqy-4&libraries=visualization&callback=initMap">
</script>
</body>
</html>

有没有办法在点击标记后加载图像？

Answer 1

从InfoWindow构造函数中删除内容并在click事件侦听器函数中设置内容将解决您的问题。

改变：

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

为：

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

然后在标记点击事件监听器中设置内容。

单击标记

1 个答案: