离线百度地图,添加按钮点击切换卫星地图和街道地图(纯JS)
离线百度地图,添加按钮点击切换卫星地图和街道地图
- 需求
- 代码
- 涉及信息
- 截图
需求
百度地图离线应用,网络上大部分都是不能切换地图的离线,只能根据配置文件填写一个类型;网上搜了一下没有这块添加类似在线版的可切换地图类型,使用官网的加载控件方式直接调用在线数据;不可行;网上搜了一款用QT实现的,想自己实现一个JS的,一样可以适用。
目前此版只对V2版离线做了实现。
代码
// ------------------------------------
// 自定义地图控件
// --------------------------------/*** 自定义地图类型切换* @param {Object} bdmapcfg 离线地图配置参数*/function MapTypeControl(bdmapcfg){this.bdmapcfg = bdmapcfg;//console.log('container', this.bdmapcfg);// 设置默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT; this.defaultOffset = new BMap.Size(10, 10); } //通过JavaScript的prototype属性继承于BMap.Control MapTypeControl.prototype = new BMap.Control();// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中MapTypeControl.prototype.initialize = function(map){var self = this;// 创建一个DOM元素var div = document.createElement("div");div.id="type-control";// 设置样式 div.style.cursor = "pointer";div.style.width="70%";div.style.height="30px";div.style.margin="10px 0px";var childNodes = [{name:"卫星",value:'satemap'},{name:"普通",value:'normalmap'}];childNodes.forEach(function(divNode, idx){//子divvar childDiv=document.createElement('div');childDiv.value=divNode.value;childDiv.style.width="35px";childDiv.style.height="20px";childDiv.style.background="#FFFFFF";childDiv.style.float="right";childDiv.style.margin="0px";childDiv.style.fontSize="12px";childDiv.style.textAlign="center";if(idx === 0) {childDiv.style.borderRadius="0 3px 3px 0";childDiv.style.borderBottom="thin solid #8EA8E0";childDiv.style.borderRight="thin solid #8EA8E0";childDiv.style.borderTop="thin solid #8EA8E0";} else if(idx === (childNodes.length -1)) {childDiv.style.borderRadius="3px 0 0 3px";childDiv.style.borderBottom="thin solid #8EA8E0";childDiv.style.borderLeft="thin solid #8EA8E0";childDiv.style.borderTop="thin solid #8EA8E0";}childDiv.addEventListener('click', function(){//console.log(this.parentNode);self.changeMapType(this.value);this.parentNode.childNodes.forEach(function(nd){//console.log(nd.id);nd.style.background="#FFFFFF";nd.style.color="#000000";});this.style.background="#8EA8E0";this.style.color="#FFFFFF";this.style.fontWeight="bold";});//console.log(self.bdmapcfg['map_type'], divNode.value, (self.bdmapcfg['map_type'] == divNode.value));if(self.bdmapcfg['map_type'] === divNode.value) {childDiv.style.background="#8EA8E0";childDiv.style.color="#FFFFFF";childDiv.style.fontWeight="bold";}childDiv.appendChild(document.createTextNode(divNode.name));div.appendChild(childDiv);});// 添加DOM元素到地图中map.getContainer().appendChild(div);// 将DOM元素返回return div;};MapTypeControl.prototype.changeMapType = function(type){var self = this;if(self.bdmapcfg['map_type'] !== type) {self.bdmapcfg['map_type'] = type;//console.log(this);//console.log('this->需在地图类型', type);if(type === 'satemap') {self.bdmapcfg.imgext = '.png'; //瓦片地图后缀self.bdmapcfg.tiles_dir = self.bdmapcfg.home+'satemap'; //瓦片图目录} else {self.bdmapcfg.imgext = '.png'; //瓦片地图后缀self.bdmapcfg.tiles_dir = self.bdmapcfg.home+'tiles'; //瓦片图目录}self.loadJScript();}};MapTypeControl.prototype.loadJScript = function(){var self = this;var script = document.createElement("script");script.type = "text/javascript";script.src = self.bdmapcfg.home+"baidumap_offline_v2_20160921_min.js";document.body.appendChild(script);map = null;initMap();};var map,zoomInt=8;function initMap(){// 百度地图API功能map = new BMap.Map("map_demo"); // 创建Map实例map.centerAndZoom(new BMap.Point(117.003586,36.67173), zoomInt); // 初始化地图,设置中心点坐标和地图级别//map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 离线只支持电子地图,卫星/三维不支持//map.setCurrentCity("北京"); // 设置地图显示的城市 离线地图不支持!!map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.addControl(new BMap.NavigationControl()); //缩放按钮// 添加自定义控件map.addControl(new MapTypeControl(bdmapcfg));map.addEventListener("zoomend", function(){zoomInt = this.getZoom();//alert("地图缩放至:" + this.getZoom() + "级");});}initMap();
涉及信息
方案重点:使用百度自定义控件方式,添加多DIV,通过鼠标事件重新生成Map对象;
资料信息:
- 离线版百度地图,网上一搜很多的。这里就不提供了。
- 官方自定义控件介绍:http://lbsyun.baidu.com/index.php?title=jspopular/guide/widget
- 参考的QT版实现:传送门
截图
卫星图:
普通图:
因为我参考了官方的配色,为了区分,截取了官方示例:
离线百度地图,添加按钮点击切换卫星地图和街道地图(纯JS)相关推荐
- 离线百度地图,QT添加按钮点击切换卫星地图和街道地图
一 .首先,需要在自己的map.html文件内添加: var bdmapcfg;// 切换地图类型function satemap(){//百度地图api配置bdmapcfg = {'home':'. ...
- android切换字体颜色,Android开发实现按钮点击切换背景并修改文字颜色的方法
本文实例讲述了Android开发实现按钮点击切换背景并修改文字颜色的方法.分享给大家供大家参考,具体如下: 其实原理很简单,用到的是selector,用来设置android:background和an ...
- Qt 实现按钮点击切换按钮图片
最近在做一个课程设计(智能家居管家),因为控制要用到门,灯,警报等一系列至少拥有两个状态的物品,所以想弄一个切换图片的效果,点击按钮一次,按钮上的图片切换成另一个图片(另一个状态),再次点击切换回去. ...
- qt中如何模拟按钮点击_Qt 实现按钮点击切换按钮图片
最近在做一个课程设计(智能家居管家),因为控制要用到门,灯,警报等一系列至少拥有两个状态的物品,所以想弄一个切换图片的效果,点击按钮一次,按钮上的图片切换成另一个图片(另一个状态),再次点击切换回去. ...
- java添加按钮点击事件_如何为odoo 10中的按钮点击事件添加一个java脚本处理程序?...
我想使用java脚本为header中的按钮创建一个处理程序.下面我视图模型给出:如何为odoo 10中的按钮点击事件添加一个java脚本处理程序? inherit_id="web.asset ...
- 鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果
今天来分享一下[鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码]. 最后的效果如下: Html代码部分: <!doctype html>&l ...
- java 按钮 事件_Java 添加按钮点击事件
展开全部 xml文件代码如下: android:id="@+id/button1" android:layout_width="wrap_content" an ...
- android 通知栏按钮,android 通知栏添加按钮点击效果
//注册按钮广播 private void setButtonBroadCast(){ final String STATUS_BAR_COVER_CLICK_ACTION="down ...
- Android studio添加按钮点击进入下一页
先来效果图: 首先创建第二个页面(与创建第一个页面时一样). 在content_main.xml文件中添加以下代码: <Buttonandroid:id="@+id/next" ...
- GGGIS地图下载器|手把手教你如何免费下载天地图和谷歌的卫星影像图以及街道地图
一.软件下载 GGGIS官方下载网址:http://www.gggis.com/sj 点"绿色免安装版本"下载软件程序到本地,解压,双击"GGGIS地图下载器.exe&q ...
最新文章
- oracle 值集附加列,EBS值集知识小结
- iframe js 加载失败_如何提高Vue项目首页的加载速度
- 7z001 002合并 linux,解压小工具-如何把拆分后的压缩包合并(如7z.001)
- canvas 文字颜色_canvas 中普通动效与粒子动效的实现
- 收集Java 性能优化的44个建议
- Zookeeper分布式安装部署
- SpringCloud系列-Ribbon的基本应用
- matlab怎么实现循环码,利用Matlab实现循环码编码
- 800多套单片机毕业设计
- 网络规划设计师教程知识点精讲之计算机网络分类
- mac如何看html5视频播放器,适用于Mac的HTML5视频播放器
- related knowledge points about protein
- gets、puts函数和fgets、fputs函数的区别与联系
- 自己动手提高ubuntu性能
- 轻量级模型设计/部署
- win10/win11系统安装Tensorflow-GPU
- 玩转Python :获取微信好友个性签名生成词云
- oracle数据库注入实战,教你oracle注入
- buuctf [pasecactf_2019]flask_ssti
- MES解决方案赋能「汽车改装行业」
热门文章
- mysql 1436_MySQL错误1436:线程堆栈溢出,用简单的查询
- 社会网络分析 社区划分—经典数据集
- 人生的路很远,一路小心
- FeedBurner 被阻尼,Feed 托管转到 FeedSky
- am解调matlab程序,AM调制解调的matlab仿真
- OneDrive文件数限制:150000
- 二、循环神经网络(RNN与LSTM)
- python 生成带有alpha 通道的视频
- 小程序 学习。。。[个人感觉吧 官方文档写的相当详细了。。]
- matlab求随机过程的数学期望,密度函数已知,怎么用matlab求其数学期望和方差?...