百度地图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>
所使用图片:
演示地址:点击
作者:itmyhome
百度地图API 自定义标注图标相关推荐
- 百度地图API : 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <!DOCTYPE html> ...
- php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
- 百度地图API 添加自定义标注 多点标注
原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...
- 如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 根据百度地图API自定义切换地图类型为卫星或普通
业务场景 根据实际业务场景的需要,不能直接使用百度地图的控件,所以打算用百度地图API中map类的setMapType()方法实现.在Vue3中使用百度地图API切换地图类型为卫星或普通,创建一个自定 ...
- 百度地图API自定义点路书,路书点击事件,路书速度动态改变
前一段时间研究百度地图路书,查了很多资料也看源码,总结了一下如下 代码中有三个图片我放在下面,自行下载重命名和代码里面的名字保持一致,并且同代码放在同一个目录里面,代码中注释也很详细,可自行copy ...
- 百度地图api自定义修改地图背景样式
引入百度地图api就不用多说了吧! https://developer.baidu.com/map/custom/ //这个网址可以去模拟修改百度地图样式 当修改到心仪的样式时,点击生成JSON,就会 ...
- 百度地图api 自定义驾车线路规划 车辆实时定位
项目需求 根据百度api给出的接口 实现从 始发地→目的地 线路规划 以及 车辆的实时位置跟踪定位 1.首先引入百度API <script type="text/javascript& ...
- 百度地图api 自定义覆盖范围及背景颜色
百度地图自带根据行政区划覆盖,只要使用api输入行政区划就可自动覆盖对应的行政区域,但是想要覆盖自定义的区域该方法就无法适应需求,百度地图JavaScript API中有一个创建多边形的方法,可使用此 ...
最新文章
- Android 事件分发面试题2
- 小小聊天室,慢慢的回忆啊!(TCP 通信实现)
- Spark RDD与DataFrame
- Android之判断时间戳是不是今天
- 实训项目四 powerpoint 综合应用_【深化改革结硕果】新疆番茄综合精深加工关键技术及产业化应用项目取得重大突破...
- pytorch: where、gather函数
- Django restframework 嵌套关系处理
- [转载] python类内部成员的访问及外部访问(入门)
- jQuery入门视频教程
- JAVA实现网页版斗地主_java实现斗地主小案例
- 大数据学习之路16-倒排索引创建,输入切片FileSplit应用
- 自动驾驶(二十)---------Waymo数据集
- 谁之过?盘点2015年上半年IT宕机事件
- 浏览器便携化操作方法
- 7-24 到底是不是太胖了 (10分)
- pytorch学习笔记——Sequential的使用和Flatten和flatten的区别
- spark报错:CREATE TEMPORARY TABLE
- TI DSP系列分类
- 无线智能灌溉系统功能
- 基于OpenGL的冰川与火鸟(光照计算模型、视景体、粒子系统)
热门文章
- c语言程序设计教程+西安交通大学,大学C程序设计教程-西安交通大学.ppt
- 【资源】OpenCV3编程入门_毛星云
- 负载均衡技术应用介绍
- windows之关闭thinkpad的默认fn功能键
- 西门子S7-200 SMART控制步进电机(三)
- 加密算法详解AES/HmacSHA1/DES
- 单片机C语言DA转换,51单片机PCF8591的DA转换程序详解[含HL-1与HJ-c52 DA代码AD/DA原理图](可直接复......
- Linux shell 用sed删除第一行、最后一行或增加删除某行
- 如何编写makefile
- AICON分论坛 | 昇思MindSpore探索人工智能发展新路径