博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 百度地图 添加自定义控件
阅读量:6955 次
发布时间:2019-06-27

本文共 2506 字,大约阅读时间需要 8 分钟。

hot3.png

// 定义一个控件类,即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);
               });
           }

转载于:https://my.oschina.net/jack088/blog/394620

你可能感兴趣的文章
【最小割】【Dinic】bzoj3275 Number
查看>>
PHP RSA加解密示例(转)
查看>>
Django权限1
查看>>
Python调用 c++ dll,并且使用Py2exe打包
查看>>
安卓布局随记
查看>>
使用gearman进行异步的邮件或短信发送
查看>>
XGBoost:在Python中使用XGBoost
查看>>
python基础知识~ 序列化
查看>>
Activity的启动模式(android:launchMode)
查看>>
java设计模式演示样例
查看>>
创建与删除索引
查看>>
HTML5新增核心工具——canvas
查看>>
改动file header (測)
查看>>
微软职位内部推荐-Senior Speech TTS
查看>>
UVA - 10574 Counting Rectangles
查看>>
HDU3336-Count the string(KMP)
查看>>
常用API接口签名验证参考
查看>>
Linux中find常见用法示例
查看>>
bootstrap 模态框动态加载数据
查看>>
初始化构造函数中定义的实体集合,方便嵌套类型的遍历
查看>>