javascript - 如何使用折线和 openInfoWindowHtml 拍摄谷歌地图的快照

Question

我正在研究使用多段线拍摄谷歌地图快照的功能，并在谷歌地图上点击多段线打开弹出窗口。带有折线的谷歌地图快照正在运行但它无法在折线上拍摄快照打开弹出窗口。折线显示在快照图片上，但信息窗口未显示。这是拍摄快照的代码。

这段代码是初始化javascript onload上的代码控件:

     var snapShotControlOptions = { hidden: true };
                snapShotControlOptions.buttonLabelHtml="<snap id='snap' style='display:none' >snap</span>"
                snapShotControl = new SnapShotControl(snapShotControlOptions);
                map.addControl(snapShotControl);

这里是拍摄谷歌地图快照的方法。

        function takeSnap() {

            //static map size
            var sizeStr = "640x640";
            var imgSize = "";
            if (sizeStr != "") {
                var sizeArray = sizeStr.split("x");
                imgSize = new GSize(sizeArray[0], sizeArray[1]);
            }
            snapShotControl.setMapSize(imgSize);
            var format = "jpg";
            snapShotControl.setFormat(format);

            var url = snapShotControl.getImage();
            //            document.getElementById("snapshot_canvas").src = url;
            SaveImage(url);

            //         
        }

//this will add polyline overlay to draw line on google map with different color of polyline on google map .

  var polyline = directionsArray[num].getPolyline();
                polyline.setStrokeStyle({ color: streetColor, weight: 3, opacity: 0.7 });
                polyline.ssColor=streetColor;                
                map.addOverlay(polyline);


///this code will open the pop info window on polyline those polyline created on google map 

问题是当我拍摄谷歌地图的照片时，他们的这些弹出窗口不包含在照片中。

  var MousePoint = "";
                var marker;
                GEvent.addListener(map, "mousemove", function (point) {
                    MousePoint = new GLatLng(point.lat(), point.lng());

                });

                GEvent.addListener(polyline, "click", function () {                   
                    map.openInfoWindowHtml(MousePoint, headMarkerHtml);                   
                });
                GEvent.addListener(polyline, "mouseout", function () {
                    // map.closeInfoWindow();
                });

你能告诉我我在折线叠加层中经过了谁的弹出窗口吗？

我已经使用 javascript 文件 snapshotcontrol.js 来拍摄快照。

Answer 1

来自快照控制源

This library makes it easy to generate an image "snapshot" of your interactive map, using the Google Static Maps API.

静态 map 不支持信息窗口或向 map 添加自定义文本之类的东西 https://developers.google.com/maps/documentation/staticmaps/index

然后您可以在浏览器的 Canvas 上绘制 map 使用此 http://html2canvas.hertzen.com/ 在其上绘制信息窗口然后下载 Canvas 内容