高德地图截屏、标记鼠标跟随示例

时间:2024-03-23 08:57:17

最近开发中用到了高德地图,需要截屏功能,以下有两种方法实现。

1) 通过html2canvas.js将页面转为图片,此种方法十分方便可实现一键自动截屏功能,但是生产环境中使用的地图版本较低,

会出现鼠标所绘标记和图形无法被截取、缩放后会有空白等问题。

高德地图截屏、标记鼠标跟随示例

2)通过插件解决,目前我用到的比较方便的是牛牛截屏插件,效果如下

高德地图截屏、标记鼠标跟随示例

 相比较而言,自动截屏更加方便,但是有可能出现样式问题 高德地图截屏、标记鼠标跟随示例 ,手动截屏则功能更加完全。

 牛牛截图下载地址:http://www.ggniu.cn/download.htm

 

标记时实现鼠标跟随效果,效果如下

高德地图截屏、标记鼠标跟随示例

 

示例代码地址:https://gitee.com/jiapengzhou/jijuuzizai