文档章节

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
粉丝 41
博文 413
码字总数 65170
作品 0
程序员
私信 提问
Essential Studio Enterprise Edition 2015 v3正式发布[附下

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

Miss_Hello_World
2015/11/02
0
0
vue地图可视化 ArcGIS篇(3)

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

YJ在掘金
11/06
0
0
百度地图API显示多个标注点并添加百度样式检索窗口

<%@ page language="java" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"......

zhwj407906450
2014/12/31
0
0
关于日历控件My97DatePicker 在IE6下出现“无法打开站点,已终止操作”

今天项目测试,发现在IE6下一个页面打开失败,提示:“无法打开站点,已终止操作”,测试了下发现是日历控件My97DatePicker 导致的错误,于是看了下My97DatePicker 的相关介绍,无果;最后无...

山海经
2014/10/27
0
0
Android 与 WebView 数据交互

1. 创建Android 项目 打开Android Studio 创建一个空的Android项目 打开Android虚拟机,这里使用的是Genymotion 2. 添加webview 清空layout内容,添加WebView控件 此时运行项目,发现android...

塔歌
07/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊storm的AggregateProcessor的execute及finishBatch方法

序 本文主要研究一下storm的AggregateProcessor的execute及finishBatch方法 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout......

go4it
47分钟前
1
0
大数据教程(7.5)hadoop中内置rpc框架的使用教程

博主上一篇博客分享了hadoop客户端java API的使用,本章节带领小伙伴们一起来体验下hadoop的内置rpc框架。首先,由于hadoop的内置rpc框架的设计目的是为了内部的组件提供rpc访问的功能,并不...

em_aaron
今天
1
0
CentOS7+git+github创建Python开发环境

1.准备CentOS7 (1)下载VMware Workstation https://pan.baidu.com/s/1miFU8mk (2)下载CentOS7镜像 https://mirrors.aliyun.com/centos/ (3)安装CentOS7系统 http://blog.51cto.com/fengyuns......

枫叶云
昨天
1
0
利用ibeetl 实现selectpicker 的三级联动

1. js 直接写在html页面上面,ibeetl 就可以动态地利用后台传上来的model List ,不需要每次点击都要ajax请求后台 2. 使用selectpicker 的时候,除了对selecct option的动态处理后,还需要 $("#...

donald121
昨天
1
0
Android SELinux avc dennied权限问题解决方法

1. 概述 SELinux是Google从android 5.0开始,强制引入的一套非常严格的权限管理机制,主要用于增强系统的安全性。 然而,在开发中,我们经常会遇到由于SELinux造成的各种权限不足,即使拥有“...

TreasureWe
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部