草庐IT

javascript - 将当前的 Google map 另存为图片

coder 2023-07-05 原文

如何将当前的谷歌地图保存为图像？下面是我用来初始化 map 的 Javascript。

var myMarker = new google.maps.LatLng(result[0].centerLat, result[0].centerLong);
var myOptions = {
  disableDoubleClickZoom: true,
  zoom: result[0].zoom,
  center: myMarker,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

我看过https://developers.google.com/maps/documentation/javascript/reference#Map但似乎没有返回当前 map 对象的 URL 或图像的方法。是否可以通过某种方式将 map 另存为图像？

最佳答案

如果您想保存的内容超出 google maps 静态 API 允许的范围(例如在其上绘制的自定义叠加层太复杂/太大而无法通过查询字符串)，您可以使用 html2Canvas ( http://html2canvas.hertzen.com/ ) 之类的东西将 map 容器导出到 Canvas ，然后将其转换为数据 URL 并根据需要进行处理。

function saveMapToDataUrl() {

    var element = $("#mapDiv");

    html2canvas(element, {
        useCORS: true,
        onrendered: function(canvas) {
            var dataUrl= canvas.toDataURL("image/png");

            // DO SOMETHING WITH THE DATAURL
            // Eg. write it to the page
            document.write('<img src="' + dataUrl + '"/>');
        }
    });
}

我认为您需要将 useCORS 选项设置为 true 才能允许该函数从 google 下载图像。

这种方法的缺点是它可能会在您的页面上留下大约 1 兆字节的数据。

我曾尝试使用这种方法将 map 导出为要下载的图像，但遇到了如何将此图像提供给漂亮庄园中的人的问题。您可以使用将其 href 属性设置为您创建的 dataUrl 的超链接，但除非您使用像 download="filename.png"这样的 HTML 属性，否则无法设置文件名，这对我来说在不同的浏览器上一直存在问题。另一种方法是将 dataUrl 发布到服务器，然后服务器根据需要发送，但是上传大图像只是为了再次下载它似乎是一种奇怪的处理方式。

关于javascript - 将当前的 Google map 另存为图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16235161/

javascriptGooglesectioncanvasasp.netgoogle-maps-api-3

有关javascript - 将当前的 Google map 另存为图片的更多相关文章

  1. ruby-on-rails - Ruby on Rails - 为文本区域和图片生成列 - 2

    我是Rails的新手，所以请原谅简单的问题。我正在为一家公司创建一个网站。那家公司想在网站上展示它的客户。我想让客户自己管理这个。我正在为“客户”生成一个表格，我想要的三列是:公司名称、公司描述和Logo。对于名称，我使用的是name:string但不确定如何在脚本/生成脚手架终端命令中最好地创建描述列(因为我打算将其设置为文本区域)和图片。我怀疑描述(我想成为一个文本区域)应该仍然是描述:字符串，然后以实际形式进行调整。不确定如何处理图片字段。那么……说来话长:我在脚手架命令中输入什么来生成描述和图片列？ 最佳答案 对于“文本”数

  2. ruby - 如何找到调用当前方法的方法 - 2

    如何找到调用此方法的位置？defto_xml(options={})binding.pryoptions=options.to_hifoptions&&options.respond_to?(:to_h)serializable_hash(options).to_xml(options)end 最佳答案 键入caller。这将返回当前调用堆栈。文档:Kernel#caller.例子[0]%rspecspec10/16|===================================================62=====

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 以毫秒为单位获取当前系统时间 - 2

    在Ruby中，以毫秒为单位获取自纪元(1970)以来的当前系统时间的正确方法是什么？我试过了Time.now.to_i，好像不是我想要的结果。我需要结果显示毫秒并且使用long类型，而不是float或double。 最佳答案 (Time.now.to_f*1000).to_iTime.now.to_f显示包含十进制数字的时间。要获得毫秒数，只需将时间乘以1000。 关于ruby-以毫秒为单位获取当前系统时间，我们在StackOverflow上找到一个类似的问题：

  5. ruby-on-rails - Rails 3，在RAILS_ROOT上方显示来自本地文件系统的jpg图片 - 2

    我正在尝试找出一种方法来显示来自不在RAILS_ROOT下(在RedHat或Ubuntu环境中)的已安装文件系统的图像。我不想使用符号链接(symboliclink)，因为这个应用程序实际上是通过Tomcat部署的，而当我关闭Tomcat时，Tomcat会尝试跟随符号链接(symboliclink)并删除挂载中的所有图像。由于这些文件的数量和大小，将图像放在public/images下也不是一种选择。我查看了send_file，但它只会显示一张图片。我需要在一个格式良好的页面中显示6个请求的图像。由于膨胀，我宁愿不使用Base64编码，但我不知道如何将图像数据与呈现的页面一起传递下去。

  6. ruby - 当前的 Ruby 方法是通过 super 调用的吗？ - 2

    在运行时的方法中，有没有办法知道该方法是否已通过子类中的super调用？例如moduleSuperDetectordefvia_super?#whatgoeshere?endendclassFooincludeSuperDetectordefbarvia_super??'super!':'nothingspecial'endendclassFu"nothingspecial"Fu.new.bar#=>"super!"我如何编写via_super?，或者，如果需要，如何编写via_super?(:bar)？ 最佳答案 可能有更好的方法

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. ruby-on-rails - 获取当前时间的单元测试代码 - 2

    为获取当前时间的代码编写单元测试的最佳方法是什么？例如，某些对象可能仅在工作日创建，其他对象在检查执行某些操作的权限时会考虑当前时间等。我想我应该模拟Date.today和Time.now。这是正确的做法吗？更新:两种解决方案(a)Time.is和(b)Time.stubs(:now).returns(t)都有效。(a)是非常好的方法，但(b)解决方案将与其他测试代码更加一致。在此question作者要求一个通用的解决方案。对于Ruby，在我的选项中，上述两个解决方案是simpler因此比提取获取当前日期/时间的代码更好。顺便说一句，我建议使用Chronic获得所需的时间，例如requ

  9. 最新版人脸识别小程序 图片识别 生成二维码签到 地图上选点进行位置签到 计算签到距离 课程会议活动打卡日常考勤 上课签到打卡考勤口令签到 - 2

    技术选型1，前端小程序原生MINA框架cssJavaScriptWxml2，管理后台云开发Cms内容管理系统web网页3，数据后台小程序云开发云函数云开发数据库（基于MongoDB）云存储4，人脸识别算法基于百度智能云实现人脸识别一，用户端效果图预览老规矩我们先来看效果图，如果效果图符合你的需求，就继续往下看，如果不符合你的需求，可以跳过。1-1，登录注册页可以看到登录页有注册入口，注册页如下我们的注册，需要管理员审核，审核通过后才可以正常登录使用小程序1-2，个人中心页登录成功以后，我们会进入个人中心页我们在个人中心页可以注册人脸，因为我们做人脸识别签到，需要先注册人脸才可以进行人脸比对，进

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐