百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了。
调试过程中的效果图:


发现图片的旋转并不是按车子的中心来的,而是之外的一个点。最后发现犯了一个很细节的错:
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(121.38750613, 31.1743319);
map.centerAndZoom(point, 15);
//创建车
var pt = new BMap.Point(121.38750613, 31.1743319);
var myIcon = new BMap.Icon("../../../../HelloWord/car.png", new BMap.Size(41,90)); //alert("图标的定位点相对于图标左上角的偏移值="+myIcon.anchor.width);
var marker = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
var label=new BMap.Label("test");
marker.setLabel(label);
marker.setRotation(180);
map.addOverlay(marker); // 将标注添加到地图中
</script>
当初Icon的Size(Icon在地图上显示的大小)随便设了一个值,结果设大了,图片在旋转时是按Size的中心来的,只是在这里我们肉眼看到没有按车子的中心旋转。将Size的大小设置成图片的大小即可。
这个问题特做下记录!!
百度地图JavaScript API覆盖物旋转时出现偏移的更多相关文章
- 百度地图JavaScript API使用
最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...
- 百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
- 【百度地图JavaScript API】手机端浏览器定位的实现
[百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476
- 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
- 百度地图 Javascript API 笔记
因为最近的一个项目用到,所以自己整理了一下遇到的一些坑 自己写了一个类库来二次封装用于调起常用的功能:https://github.com/iRuxu/iBMap 快速文档链接 Javascript ...
- 百度地图 JavaScript API 极速版 开发体会
前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...
- 百度地图Javascript API 调用示例
调用示例 !<!DOCTYPE html> <html> <head> <title>百度地图DEMO</title> </head& ...
- 基于百度地图JavaScript API,员工住址统计
公司一般都有通讯和住址的统计,但是文字化的表格根本就不知道住在哪. 用百度地图就可以轻松解决, 而且公司还经常人员变动,读取excel中的内容,就不用每次还要更改地图文件了. 在遇到需要聚餐在地图中标 ...
- 百度地图JavaScript API本地搜索的结果面板
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- XCAT在虚拟机上部署系统
xcat更新到2.13了,老的manual很多都没用了.前一整子居然没搞成功,只好再来试一次. 官网也搬到了xcat.org.首先就是下core和dep包 分别是 xCAT Core Packages ...
- Ubuntu iptables配置
sudo su sudo apt-get install iptables-persistent modprobe ip_tables #启动iptable #删除原有iptables规则 ipt ...
- windows系统下的第一个console程序
窗口+r 键,输入cmd,打开一个命令行窗口 切换到你的目标目录 输入 dotnet new dotnet会自动帮你创建3个文件. NuGet.Config文件主要定义了NuGet获取nupkg包时的 ...
- 全面理解Javascript闭包和闭包的几种写法及用途
好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一些实用的东西,主要将闭包的写法.用法和用途. 一.什么 ...
- ECSHOP农行支付接口开发(含手机端)
对于ECSHOP来说,支付是以接口的形式存在的.于是: 1:首先添加接口文件 includes\modules\payment下,增加abcbank.php,代码如下: <?php /** * ...
- mysql --prompt
mysql --prompt修改命令行链接mysql时的提示符,shell脚本示例如下 #!/bin/bash in crm) cmd='mysql -h192.168.1.2 -uroot -pro ...
- AngularJS快速入门指南14:数据验证
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- [Java集合] 彻底搞懂HashMap,HashTable,ConcurrentHashMap之关联.
注: 今天看到的一篇讲hashMap,hashTable,concurrentHashMap很透彻的一篇文章, 感谢原作者的分享. 原文地址: http://blog.csdn.net/zhanger ...
- Atitit 团队建设的知识管理
Atitit 团队建设的知识管理 1.1. 要遵循"知识积累--创造--应用--形成知识平台--再积累--再创造--再应用--形成新的知识平台"的循环过程.1 1.2. 显性知识包 ...
- NFC:Arduino、Android与PhoneGap近场通信
NFC:Arduino.Android与PhoneGap近场通信(第一本全面讲解NFC应用开发的技术著作移动智能设备近距离通信编程实战入门) [美]Tom Igoe(汤姆.伊戈),Don Colema ...