百度地图API 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置,
也可以使用marker.setIcon()方法。
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.323066,39.989956), 16); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 var points = [
[116.316967,39.990748],
[116.323938,39.989919],
[116.328896,39.988039],
[116.321135,39.987072],
[116.332453,39.989007],
[116.324045,39.987984],
[116.322285,39.988316],
[116.322608,39.986381]
];
// 向地图添加标注
for( var i = 0;i < points.length; i++){
var myIcon = new BMap.Icon("http://7xic1p.com1.z0.glb.clouddn.com/markers.png", new BMap.Size(23, 25), {
// 指定定位位置
offset: new BMap.Size(10, 25),
// 当需要从一幅较大的图片中截取某部分作为标注图标时,需要指定大图的偏移位置
imageOffset: new BMap.Size(0, 0 - i * 25) // 设置图片偏移
});
var point = new BMap.Point(points[i][0],points[i][1]);
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point,{icon: myIcon});
map.addOverlay(marker);
}; </script>
所使用图片:
演示地址:点击
百度地图API 自定义标注图标的更多相关文章
- 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...
- 百度地图API 添加自定义标注 多点标注
原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...
- 百度地图API自定义地图
http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ...
- HTM L百度地图API 自定义工具地图实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 百度地图API 自定义坐标点及图片
var map = new BMap.Map("allmap");var point = new BMap.Point(105.955754,36.525109);map.cent ...
- 【百度地图API】北京周边7日游——图标按路线轨迹行动
原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...
- 【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍
原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...
- 百度地图api窗口信息自定义
百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delega ...
随机推荐
- 算法工程师<数学题/智力题>
<数学题/智力题> 1.如果一个女生说,她集齐了十二个星座的前男友,我们应该如何估计她前男友的数量? https://blog.csdn.net/FnqTyr45/article/deta ...
- VMware与Hyper-V的冲突解决 VMware Workstation 与 Device/Credential Guard 不兼容 解决方案
win10专业版官方解决方案https://kb.vmware.com/s/article/2146361 win10家庭版解决方案win10家庭版本身是不支持Hyper-V服务的,但是如果是“win ...
- python_urllib2:urlerror和httperror
urllib2的异常错误处理 在我们用urlopen或opener.open方法发出一个请求时,如果urlopen或opener.open不能处理这个response,就产生错误. 这里主要说的是UR ...
- ubuntu日常使用指南
目录 换源 开发相关的基本包 vimrc python, pip zsh, oh-my-zsh, josh 配置android相关环境 查看库文件(libxxx.a/libxxx.so,动态静态库均可 ...
- JavaScript复制文本探究
JS复制文本基本分为两步-First: 选中需要复制的节点,及选区:Second: 执行document.execCommand('copy')命令复制 对于选区,属于HTMLInputElement ...
- 如何把遗留的Java应用托管在Service Fabric中
一.概述 众所周知,微服务化尤其对遗留系统进行微服务化一般采用"Lift and Shift"的模式进行. Service Fabric作为一个微服务托管平台,不仅仅可以在上面跑. ...
- pycharm创建scrapy项目教程及遇到的坑
最近学习scrapy爬虫框架,在使用pycharm安装scrapy类库及创建scrapy项目时花费了好长的时间,遇到各种坑,根据网上的各种教程,花费了一晚上的时间,终于成功,其中也踩了一些坑,现在整理 ...
- 回文自动机(PAM) 学习笔记
原文链接www.cnblogs.com/zhouzhendong/p/PAM.html 前置知识 无. (强行说和KMP有关也是可以的……) 关于回文串的一些性质 1. 一个长度为 n 的字符串最多有 ...
- P1462 通往奥格瑞玛的道路 最短路
题目背景 在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主城暴风城 在被众多联盟的士兵攻击后,他决定逃回自己的家乡奥格瑞玛 题目描述 在艾泽拉斯, ...
- King 差分约束 判负环
给出n个不等式 给出四个参数第一个数i可以代表序列的第几项,然后给出n,这样前面两个数就可以描述为ai+a(i+1)+...a(i+n),即从i到n的连续和,再给出一个符号和一个ki当符号为gt代表‘ ...