文档章节

js 百度地图 添加自定义控件

Jack088
 Jack088
发布于 2015/04/01 12:38
字数 426
阅读 32
收藏 0

// 定义一个控件类,即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("设置地址"));
               // 设置样式
               div.style.marginLeft = "54%";
               div.style.marginTop = "58%";
               div.style.cursor = "pointer";
               div.style.border = "1px solid gray";
               div.style.backgroundColor = "red";
               // 绑定事件,点击一次放大两级
               div.onclick = function(e){
                   alert('当前地图中心点:' + map.getCenter().lng + ',' + map.getCenter().lat);
                   mcenter(map.getCenter());
                   //$state.go('getPosition');
                   //map.setZoom(map.getZoom() + 2);
               }
               // 添加DOM元素到地图中
               map.getContainer().appendChild(div);

               // 创建一个DOM元素
               var div2 = document.createElement("div");
               // 设置样式
               div2.style.marginLeft = "45%";
               div2.style.marginTop = "65%";
               div2.style.height = "41px";
               div2.style.width = "34px";
               div2.style.cursor = "pointer";
               div2.style.position = "absolute";
               div2.style.backgroundImage = "url(images/dingwei2.png)";
               div2.onclick = function(e){
                   alert('当前地图中心点:' + map.getCenter().lng + ',' + map.getCenter().lat);
                   mcenter(map.getCenter());
                   //$state.go('getPosition');
                   //map.setZoom(map.getZoom() + 2);
               }
               // 添加DOM元素到地图中
               map.getContainer().appendChild(div2);

               // 将DOM元素返回
               return div;
           }
// 创建控件
           var myZoomCtrl = new ZoomControl();
// 添加到地图当中
           map.addControl(myZoomCtrl);

           //alert('当前地图中心点:' + map.getCenter().lng + ',' + map.getCenter().lat);

           map.addEventListener("dragend",function(e){
               //var pt = map.getBounds().getCenter();
               //window.status = "LON:" + pt.lng + " LAT:" + pt.lat;
               //alert(window.status);
              // alert('当前地图中心点:' + map.getCenter().lng + ',' + map.getCenter().lat);

               mcenter(map.getCenter());
           });

           function mcenter(certer){
               Ds.set('Latitude',certer.lat);
               Ds.set('Longitude',certer.lng);
               // 百度地图API功能
               var point = new BMap.Point(certer.lng,certer.lat);//new BMap.Point(116.331398,39.897445);
               var gc = new BMap.Geocoder();
               gc.getLocation(point, function(rs){
                   var addComp = rs.addressComponents;
                   alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                   $scope.cpoint = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                   Ds.set('dinnerAddress',$scope.cpoint);
               });
           }

© 著作权归作者所有

共有 人打赏支持
Jack088
粉丝 42
博文 472
码字总数 68024
作品 0
程序员
私信 提问
网页里的代马,地图调用

网页里的代马: 这是百度地图调用,我在这里标了:我的标记,那块需要个图片,文字在做个超链接。 百度地图API自定义地图

pwh2008
2015/11/17
95
0
Essential Studio Enterprise Edition 2015 v3正式发布[附下

使用Essential Studio企业版,开发者可以创建丰富的应用程序,并轻松地集成商业智能分析和报告解决方案。Essential Studio企业版是世界级的软件组件,它使得开发者能在最苛刻的环境下开发出高...

Miss_Hello_World
2015/11/02
0
0
echarts 和百度地图出散点图

各位好,如题,我想通过跟百度地图那种方式出散点图。 我根据http://weibo.com/ttarticle/p/show?id=2309403985903470163325 并没有出来百度的地图,具体做法如下: 1) 2) var bmapChar = e...

Mr_XK
2016/07/06
2.1K
1
百度地图新手教程7(转载自百度)

工具 1.地图工具概述 2.向地图添加工具 3.通过按钮控制工具的开启和关闭 4.拉框放大工具 地图工具概述 提示:工具已经制作成开源库(lib)对外免费开放,可直接访问JavaScript 开源库。若您需...

长平狐
2013/01/06
2K
0
vue地图可视化 ArcGIS篇(3)

ArcGIS for javascript开发心得 本次实例中采用ArcGIS for javascript3.24版本,由于版本3与4在API等存在较大区别,就不一一列举,详细区别看[官方解释] arcgis for js4.7版本能够自动创建l...

YJ在掘金
2018/11/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Django进阶 1.1 ORM基础—ORM 1.2.1 增删改查之查询 1.2.2 删改增 (1) 1.2.3 删改增 (2)

ORM基础 ORM是Django操作数据库的API,Django的作者将sql语句封装在里面供我们使用。 我们前面还提到过Django提供一个模拟数据库的工具,sqlite,供我们学习测试使用。 如果我们想使用mysql...

隐匿的蚂蚁
今天
1
0
Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
今天
3
0
数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
3
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
5
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部