如何使用折线和openInfoWindowHtml拍摄谷歌地图的快照 [英] how to take snapshot of google map with polyline and openInfoWindowHtml

问题描述

我正致力于利用折线拍摄谷歌地图的快照，并在折线上点击谷歌地图打开弹出窗口。
谷歌地图与折线的快照工作
，但它无法在折线上拍摄快照打开弹出窗口。
折线显示在sanpshot图片上，但信息窗口没有显示。
以下是拍摄快照的代码。

I'm working on functionality to take snapshot of google map with polylines and open popup window on polyline click on google map. The snapshot of google map with polylines is working but it will not able to take snapshot open popup window on polyline. polyline are showing on sanpshot picture but info window are not showing . Here is code to take snapshot.

此代码用于初始化javascript onload上的代码控制：

This code is to initialize the code control on javascript onload :

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

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

here is the method take snap to take the sanp shot of google map .

        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 

问题是当我拍摄谷歌地图时，这些弹出窗口不包括在sanpshot上。

and problem is their these pop window not included on sanpshot when i take sanpshot of 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();
                });

您可以告诉我在折线叠加层中通过弹出窗口的人。

can you please tell who i pass popup window in polyline overlay .

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

i have use javascript file snapshotcontrol.js to take the snapshot.

推荐答案

来自snapshotcontrol source

from the snapshotcontrol source

使用Google Static Maps API，可以轻松生成
交互式地图的图像快照。

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

静态地图不支持信息窗口或任何类似添加自定义文本到地图的内容
https://developers.google.com/maps/documentation/staticmaps/index

Static maps doesn't support info windows or anything like adding custom text to the map https://developers.google.com/maps/documentation/staticmaps/index

您可以在浏览器中的画布上绘制地图，然后
使用此 http://html2canvas.hertzen.com/
然后下载画布内容

You could draw the map on a canvas within the browser then draw the info window on top of that using this http://html2canvas.hertzen.com/ and then download the canvas content

这篇关于如何使用折线和openInfoWindowHtml拍摄谷歌地图的快照的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！