百度地图API : 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions
的icon
属性进行设置,
也可以使用marker.setIcon()
方法。
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body,html,#allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑";}</style><script type="text/javascript"src="https://api.map.baidu.com/api?v=2.0&ak=LaQ2jfcObK42sDixAN2BraP2jbGMU6BC"></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><title>GPS转百度</title>
</head><body><div id="allmap"></div>
</body></html>
<script type="text/javascript">// 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例var ggpoint = new BMap.Point(129.879392, 32.790481)map.centerAndZoom(ggpoint, 16); // 初始化地图,设置中心点坐标和地图级别map.addControl(new BMap.MapTypeControl()); //添加地图类型控件map.setCurrentCity("长崎"); // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放var points = [[123.319727767605, 41.4229349260951],[125.725967756961, 39.0269627713093],[126.976200904837, 37.559805362172],[126.995866800926, 37.5646576789431],[127.717276492584, 37.8846597149346],[127.845636602218, 36.5247159814598],[129.881057104894, 32.7479331075868],[129.877945175468, 32.7441603140361],[129.823280322228, 32.8551075968325],[129.996944752118, 33.439129860535],[129.857128998386, 33.2587933885413],[129.788714312017, 33.7842305297287],[130.241407289985, 32.7843329855946],];// // 坐标转换完之后的回调函数translateCallback = function (data) {if (data.status === 0) {// 向地图添加标注for (var i = 0; i < points.length; i++) {var myIcon = new BMap.Icon("https://i.loli.net/2020/10/21/hQeUEjzTaZv63uB.png", new BMap.Size(23, 35));var point = new BMap.Point(points[i][0], points[i][1]);// 创建标注对象并添加到地图 var marker = new BMap.Marker(point, { icon: myIcon });map.addOverlay(marker);};map.addOverlay(marker); // 将标注添加到地图中var label = new BMap.Label("您现在的位置", { offset: new BMap.Size(20, -10) });marker.setLabel(label); //添加百度labelmap.setCenter(data.points[0]);}}setTimeout(function () {var convertor = new BMap.Convertor();var pointArr = [];pointArr.push(ggpoint);convertor.translate(pointArr, 1, 5, translateCallback)}, 1000)// 地图的点击事件map.addEventListener('click', function (e) {console.log('点击位置经纬度:' + e.point.lng + ',' + e.point.lat);});
</script>
百度地图API : 自定义标注图标相关推荐
- 百度地图API 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...
- 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中有一个创建多边形的方法,可使用此 ...
最新文章
- ubuntu中安装rabbitmq
- RollingFileAppender
- Deformable ConvNets--Part4: Deformable Convolutional Networks
- [深度学习基础] 4. 卷积神经网络
- 两个有用的minicom命令
- Windows下pip安装包报错:Microsoft Visual C++ 9.0 is required Unable to find vcvarsall.bat
- 3-8-循环队列-栈和队列-第3章-《数据结构》课本源码-严蔚敏吴伟民版
- 编译调试Apache HTTP Server
- 计算机组成原理完整学习笔记(六):指令系统
- 使用visual studio code 编写小程序代码
- 巨人肩膀_如何站在巨人的肩膀上
- (四十七) 蓝牙自拍杆原理学习
- 如何把word默认新建文档的格式样式更改为常用的格式样式呢
- 115网盘正式版评测
- java aspose 导出word_使用Aspose.word导出word报告
- Python 内置函数dir()与对象的特殊属性以及一切都是对象的轻谈
- android 实现进度条的画面加载
- NameError: name ‘_name_‘ is not define!解决方法
- matplotlib中绘图常用函数
- 2021支付宝扫福玩法攻略
热门文章
- 剑指offer 用2个栈实现队列
- 简单易用的baidutemplate模板的使用
- Elasticsearch7.X ILM索引生命周期管理(冷热分离)
- kubernetes问题排查
- TransmittableThreadLocal 解决 线程池线程复用 无法复制 InheritableThreadLocal 的问题
- 修改Apache的默认站点目录的方法,需要的朋友可以参考下
- 深入了解SpringCloud Hystrix
- Object类和String类
- 构建springmvc+mybatis+dubbo分布式平台-dubbo简介
- CentOS 6.9配置网卡IP/网关/DNS命令详细介绍及一些常用网络配置命令(转)