文档章节

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

Jack088
 Jack088
发布于 2015/04/01 12:38
字数 426
阅读 29
收藏 0
点赞 0
评论 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
博文 372
码字总数 57721
作品 0
程序员
百度Api完成在线地图定位显示

地址:http://lbsyun.baidu.com/jsdemo.htm#c13

Rawirm ⋅ 05/17 ⋅ 0

Echarts-百度地图省分着色

通过Echarts3结合百度地图,对全国省分进行着色。 起因 由于Echarts3中,不再使用china.js文件: ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目...

莫显辉 ⋅ 05/04 ⋅ 0

【教程】javascript&浏览器对象入门教程

此教程是头一章 估计我以后也不想写什么第二章了 需要的基础知识:javascript语法和常用对象 大神勿喷 上次讲完了封包 这回我们再说说javascript javascript是一种弱类型的客户端脚本语言 在...

apachecn_飞龙 ⋅ 2013/12/05 ⋅ 0

android webview获取网页源代码,js执行前后

webview获取网页源代码分两种,一种是js执行前,一种是js执行后 1.js执行前 URL url = new URL(path); // 根据URL // 打开连接,URL.openConnection函数会根据URL的类型,返回不同的URLConn...

tan6458 ⋅ 2017/07/12 ⋅ 0

原生Js从0开始实现一个链家网地图画圈找房功能

概述 最近做项目的时候遇到的一个需求:要实现一个链家网地图找房中的画圈找房功能。链家网是采用百度地图实现房源展示,先来看看链家网的画圈找房功能,有木有很炫酷~~,可以到链家上体验一下...

超级索尼子 ⋅ 05/26 ⋅ 0

django 1.8 官方文档翻译:5-2-2 表单素材 ( Media 类)

表单素材 ( 类) 渲染有吸引力的、易于使用的web表单不仅仅需要HTML – 同时也需要CSS样式表,并且,如果你打算使用奇妙的web2.0组件,你也需要在每个页面包含一些JavaScript。任何提供的页面...

apachecn_飞龙 ⋅ 2015/09/19 ⋅ 0

Android中使用WebView

现在很多移动端的应用,大多数都采用混合开发,也就是安卓原生控件加上我们的html代码 当然,要使用html的东西,android提供了一个控件,也就是WebView 那我们一起来看看WebView的使用吧 首先...

月夜中徘徊 ⋅ 05/15 ⋅ 0

没有 Python,微软宣布 Excel 新增 JavaScript 支持

去年年底曾有外媒报道,由于社区用户的强烈要求,微软正考虑添加 Python 作为官方的一种 Excel 脚本语言。不过在昨天的 Build 2018 开发者大会上,微软没有透露有关 Python 支持的消息,而是...

王练 ⋅ 05/09 ⋅ 0

pyecharts v0.5.0 发布!使用 Python 生成 Echarts 图表

pyecharts v0.5.0 发布!新增 javascript 回调函数 和 echarts 事件处理函数。 发布日志:http://pyecharts.org/#/zh-cn/release-note/v050 Added issue#311 提供 Jupyter Notebook 导出为 ......

开源中国首席机器人 ⋅ 04/29 ⋅ 0

前端 - 百度地图 API 基础入门

1.前言 最近想完成一个网站,里面需要使用地图相关的内容。 经过多方考虑,决定使用百度地图来完成,所以将整个学习历程进行简单的整理,方便朋友们来快速入门。 本文系作者 李鹏(MR_LP)原...

mr_lp ⋅ 2017/02/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 52分钟前 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部