谷歌地图旋转图片marker(图片旋转转base64)

2023-11-06

//custom rotate icon method for Google map
var RotateIcon = function (options) {
    this.options = options || {};
    this.rImg = options.img || new Image();
    this.rImg.src = this.rImg.src || this.options.url || '';
    this.options.width = this.options.width || 50|| 52;
    this.options.height = this.options.height || 47 || 60;
    canvas = document.createElement("canvas");
    canvas.width = this.options.width;
    canvas.height = this.options.height;
    this.context = canvas.getContext("2d");
    this.canvas = canvas;
};
RotateIcon.makeIcon = function (url) {
    return new RotateIcon({url: url});
};
RotateIcon.prototype.setRotation = function (options) {
    var canvas = this.context,
        angle = options.deg ? options.deg * Math.PI / 180 :
            options.rad,
        centerX = this.options.width / 2,
        centerY = this.options.height / 2;

    canvas.clearRect(0, 0, this.options.width, this.options.height);
    canvas.save();
    canvas.translate(centerX, centerY);
    canvas.rotate(angle);
    canvas.translate(-centerX, -centerY);
    canvas.drawImage(this.rImg, 10, 10);
    canvas.restore();
    return this;
};
RotateIcon.prototype.getUrl = function () {
    return this.canvas.toDataURL('image/png');
};

var makeOnlineIcon =  RotateIcon
    .makeIcon('/cap/static/lib/image/cap/images/online-sign-car.png');
var makeGpsIcon =  RotateIcon
    .makeIcon('/cap/static/lib/image/cap/images/online-gps-car.png');
var makeDataIcon =  RotateIcon
    .makeIcon('/cap/static/lib/image/cap/images/online-data-car.png');
var makeOfflineIcon =  RotateIcon
    .makeIcon('/cap/static/lib/image/cap/images/offline-sign-car.png');


//
markerTempGoogle = new google.maps.Marker({
                        position: {lat: lat, lng: lng}, icon: {
                            url: carStateIcon
                                .setRotation({deg: jdocGps.TG_cap_rotation - 90})
                                .getUrl()
                        }, map: gmap
                    });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

谷歌地图旋转图片marker(图片旋转转base64) 的相关文章

随机推荐

  • Python os.walk方法(获取文件夹目录下的内容)

    一 os walk方法 os walk方法 参数为文件夹路径 返回3个内容 绝对路径 子文件夹 文件名 此方法可以遍历文件夹下的所有文件 子文件及内的所有文件 import os def file name file dir for roo
  • matplotlib中的reshape()和squeeze()

    引用https blog csdn net zenghaitao0128 article details 78512715 reshape用法 一般用法 numpy arange n reshape a b 依次生成n个随机数 并且以a行b
  • adb 提示 adb server version(31) doesn't match this client(40)... 解决办法

    链接 https www cnblogs com JasonLGJnote p 11876164 html
  • Spring原理学习(四)Aware 接口

    1 Aware 接口 Aware 接口用于注入一些与容器相关信息 例如 BeanNameAware 注入 bean 的名字 BeanFactoryAware 注入 BeanFactory 容器 ApplicationContextAware
  • 为静态资源提供网络映射服务

    让本地服务器 也就是localhost 可以直接在浏览器里输入http localhost XXX访问本地的图片 写一个WebMvcConfig类实现WebMvcConfigurer类的addResourceHandlers方法 impor
  • linux中怎么用shell显示文件某一行或几行内容

    声明 从网上看了很多关于这方面的资料 做了一下整合 参考的链接在文章末尾贴出 命令 相关显示命令有sed tail cat awk head等 可以常看Linux命令大全 man命令或者help命令查看相关用法 我们只介绍其中的一部分 一
  • ElasticSearch6.X时间范围查询无效bug

    ElasticSearch6 X时间范围查询无效bug 1 es6 8 1版本时间范围查询 原始写法如下 GET oms historyalarm historyalarm recent historyalarm recent search
  • C# WPF 滚动字幕实现

    原文 C WPF 滚动字幕实现
  • 服务器显卡驱动安装NVIDIA-1080Ti

    服务器显卡驱动安装 主要参考的安装方式 以下操作在主机中 并非使用远程登录方式 未验证远程登录方式是否可行 需要 显卡驱动的 run 文件 显卡驱动安装第一种方法 https askubuntu com questions 149206 h
  • MYSQL ERROR 1130: Host is not allowed to connect to this MySQL server错误解决

    E RROR 1130 Host XXXXXX is not allowed to connect to this MySQL server 错误的解决方法 方法一 执行命令 mysql gt GRANT ALL PRIVILEGES ON
  • el-select 下拉框有值却无法选中

    场景 el select 下拉框数据是从接口获取的大量数据 点击选项后 在 change 函数中查看是值已经发生变化了 但在页面上没有显示新改变后的值 也就是下拉框的值无法选中 解决方法 在 el select 的 change 事件绑定
  • tensorflow问题:UnicodeDecodeError: 'utf-8' codec can't decode byte 0xff in position 0

    在 tensorflow 实战Google深度学习框架 中的7 2 1节 Tensorflow图像处理函数 一段小代码 使用Tensorflow读入图像 代码如下 运行时发生错误如下 解决方法 问题原因 第一 第二 我们来看下tf gfil
  • idea java 远程调试_使用idea开启远程调试

    jar程序运行在远程服务器上出现错误 又没有明确的错误日志能够查看得到 无从下手 这篇文章获取可以帮助一二 这里我来分享一种通过idea实现远程调试的方法 几个及其简单的操作就可以使我们定位远程服务器的错误时更加得心应手 一 在idea端进
  • websocket中spring注入service对象失败问题处理

    因为在spring中controller service dao默认都为单例模式 而websocket为多线程的 websocket初始化时 非连接用户 会将 Autowired的对象注入成功 后面创建socket链接后会注入为null 因
  • 复现XSS漏洞

    一 设置漏洞环境 首先 我们需要一个包含XSS漏洞的Web应用 我们可以使用一个简单的示例页面来模拟漏洞 以下是一个基本的示例代码 h1 欢迎来到我们的网站 h1
  • pygame入门

    二 创建游戏窗口 要使用pygame首先需要进行初始化 import pygame 初始化pygame pygame init 想要运行一个游戏 一定要有用于运行游戏的窗口 创建窗口pygame display set mode 在括号里可
  • C++总结笔记(十一)—— Lambda表达式的应用

    文章目录 一 Lambda表达式是什么 二 程序示例 1 在STL中的使用 一 Lambda表达式是什么 Lambda表达式时C 11引入的语法 本质上是一个匿名函数 用 三个符号组成表达式 格式为 capture list params
  • CSS清除浮动及手写clearfix

    清除浮动的方法 使用clear both清除浮动 clear both意思就是清除浮动 clear clear both verflow方法的使用 当给父元素设置了overflow样式 不管是overflow hidden或overflow
  • android 浅探打包安装APK

    打包安装过程 Run as Android Application 1 生成apk文件 1 生成 dex文件 DVM java gt javac gt class gt dx bat gt dex 架构 寄存器 cpu上一块高速的缓存 2
  • 谷歌地图旋转图片marker(图片旋转转base64)

    custom rotate icon method for Google map var RotateIcon function options this options options this rImg options img new