百度地图开发如何自定义控件(无敌的解决办法)
时间:2022-07-22
本文章向大家介绍百度地图开发如何自定义控件(无敌的解决办法),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
为什么写?
问题起因:开发一个利用MUI开发的移动端的APP,APP中使用了百度地图。在使用了百度地图开发过程中,我想实现自定义控件,如下图所示:百度地图APP中的竖着的,靠右边或者下边的控件一样。
折腾了几天的空余时间,终于搞出来了,最终结果对比图:
百度地图APP的:
我实现的:
丑是丑了点(毕竟没专业学过前端),但是总归是实现了(自夸一下,我还是很厉害的,hhhh)
可愁死个人,翻遍了百度都找不到一篇比较适合新手的文章。真是很符合一句话:自己动手,丰衣足食。那就自己来吧!
喜欢百度的原因是因为DOME文档给的挺好,复制下来,然后阅读下代码基本上就可以拿到项目中来了。
地址:http://lbsyun.baidu.com/jsdemo.htm#b0_6
找到如上图所示的地图控件示例
大家可以自己试试:我个人觉得这种方法做简单的还可以,如果是复杂点的程序,就不太好了。建议自己把这个小dome跑一下,学任何语言毕竟都是从hello开始的嘛!
如果不想去百度官网复制下来,就用下面的吧:
<!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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>添加自定义控件</title>
</head>
<body>
<div id="allmap"></div>
<p>在地图左上角添加"放大2级"自定义控件,双击放大地图2级</p>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 定义一个控件类,即function
function ZoomControl(){
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("放大2级"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
// 绑定事件,点击一次放大两级
div.onclick = function(e){
map.setZoom(map.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
</script>
还可以添加比例尺
可以添加图层切换
代码请到官网自取
但是都不能满足我这颗幼小的心灵
费劲心思的筹划了这一切,但是似乎想到了一个更好的办法,如下:
- 那就是我可以直接创建一个div呀,让div直接浮在百度地图的map上,不就好了吗?
二话不说就干了
代码如下:
<!-- 悬浮的div工具栏 -->
<div id="up-map-div" style="color: #000000;">
<div class="mui-input-row" style="text-align: center;" >
<a href="javascript:void(0)" class="mui-tab-item " >
<span class="iconfont icon-tuceng"></span>
<br />
<span class="caidanYanse">图层</span>
</a>
</div>
<hr style="height:1px;border:none;border-top:1px solid #555555;" />
<div class="mui-input-row" style="text-align: center;">
<a href="javascript:void(0)" class="mui-tab-item " id="jingdian">
<span class="iconfont icon-jingdian" class="caidanYanse"></span>
<br />
<span class="caidanYanse">景点</span>
</a>
</div>
<hr style="height:1px;border:none;border-top:1px solid #555555;" />
<div class="mui-input-row" style="text-align: center;">
<a href="javascript:void(0)" class="mui-tab-item " id="baoxiu">
<span class="iconfont icon-wj-bxd" class="caidanYanse"></span>
<br/>
<span class="caidanYanse">报修</span>
</a>
</div>
<hr style="height:1px;border:none;border-top:1px solid #555555;" />
<div class="mui-input-row" style="text-align: center;">
<a href="javascript:void(0)" class="mui-tab-item " id="biaobai">
<span class="iconfont icon-biaobaiqiang" class="caidanYanse"span>
<br/>
<span class="caidanYanse">表白</span>
</a>
</div>
<hr style="height:1px;border:none;border-top:1px solid #555555;" />
<div class="mui-input-row" style="text-align: center;">
<a href="javascript:void(0)" class="mui-tab-item " id="gengduo">
<span class="iconfont icon-gengduo" class="caidanYanse"></span>
<br/>
<span class="caidanYanse">更多</span>
</a>
</div>
</div>
由于上面的代码很多,复杂,凌乱,不好演示。就创建一个简单的div,为了好演示
<div id="map" style="margin-top: 47.8px;"></div>
<!-- 测试的悬浮div工具栏 -->
<div id="test_map_div">
我是悬浮的测试的div工具栏
</div>
项目跑起来的结果:并没有我刚才添加的div
这个时候就要看个人的基本功了
操作步骤如下图
发现自己创建的div被百度地图的map的div给顶到下面了,看不到了。
不要紧,这个时候要看css了
position: absolute;
top: 50%;
感觉怎么样,是不是很爽呀。简简单单的css
更爽的来了
#test_map_div{
top: 50%;
left: 85%;
width: 40px;
height: 300px;
position: absolute;
z-index: 9999;
border: 1px solid black;
border-radius: 9px;
background-color: #FFFFFF;
}
如果有问题可以给我留言,看到会第一时间回复的,或者我邮箱:8042965@qq.com
- poj 1088 滑雪
- 八数码难题解法大全
- React第三方组件5(状态管理之Redux的使用⑥Redux DevTools)
- React第三方组件5(状态管理之Redux的使用⑤异步操作)
- HDU - 1846 Brave Game
- React多页面应用4(webpack4 提取第三方包及公共组件)
- zoj 2420
- SPOJ NWERC11B Bird tree
- React多页面应用6(gulp自动化发布到多个环境、生成版本号、压缩成zip等)
- SDIBT 1046 Primary Arithmetic
- 洛谷P2415 集合求和
- React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
- SDIBT 1046 Primary Arithmetic
- React多页面应用4(webpack自动化生成多入口页面)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 2015 09CCF计算机软件能力认证试题第三题
- 《内蒙古自治区第十二届大学生程序设计竞赛试题_D: 正品的概率》
- Elasticsearch: Painless script编程
- mysql实现定时全量备份
- 在浏览器调起本地应用的方法
- 《内蒙古自治区第十二届大学生程序设计竞赛试题_G: 最大收益》
- Vue 实现前进刷新,后退不刷新的效果
- 2015 09 CCF计算机软件能力认证试题第四题高速公路
- 《hdu 4540 威威猫打地鼠》
- 多个请求下 loading 的展示与关闭
- 第13期:表统计信息的计算
- 2019.8.15乘兴打Codeforces Round #569 (Div. 2)小记A题A. Alex and a Rhombus
- 2019.8.15乘兴打Codeforces Round #569 (Div. 2)小记B. Nick and Array
- 《hdu 免费馅饼》
- 技术分享 | 使用 pt-query-digest 分析慢日志