百度地图自定义控件分享

废话不多说了，直接奉上代码;

代码如下:

<script>
        var map = new BMap.Map('allmap');
        var Bcenter = new BMap.Point(116.404,39.915);
        map.centerAndZoom(Bcenter,11);
        //自定义控件
        function staticControl(){
            this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
            this.defaultOffset = new BMap.Size(10,10);
        }
        //继承Control的API
        staticControl.prototype = new BMap.Control();
        //初始化控件
        staticControl.prototype.initialize=function(map){
            var div = document.createElement('div');
            var e1 = document.createElement('input');
            e1.type = 'button';
            e1.value = '重置';
            e1.onclick=function(){
                statics();
            }
            div.appendChild(e1);
            var e2=document.createElement('input');
            e2.type = 'button';
            e2.value = '缩小';
            e2.onclick=function(){
                endStatics();
            }
            div.appendChild(e2);
            var e3 = document.createElement("input");
            e3.type = "button";
            e3.value = "放大";
            e3.onclick = function () {
               setStatics();
            }
            div.appendChild(e3);
            //添加DOM元素到地图中
            map.getContainer().appendChild(div);
            //返回DOM
            return div;
        }
        //创建控件实例
        var staticsCtrl = new staticControl();
        //添加到地图当中
        map.addControl(staticsCtrl);
        function statics(){
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        }
        function endStatics(){
            map.setZoom(map.getZoom()-2);
        }
        function setStatics(){
            map.setZoom(map.getZoom()+2)
        }
    </script>

上面代码就是个人正在使用的百度地图的自定义控件，希望大家能够喜欢。

赞 (0)

相关推荐

  • 百度地图API应用之获取用户的具体位置

    百度地图API应用之获取用户的具体位置

    功能的大概:用户通过点击地图上面的位置,在地图上面进行描点,然后再把获取的到的地理位置保存到地图上面的地址栏目中. 主要是百度地图API的使用 复制代码 代码如下: var map = new BMap.Map("allmap"); //实例化一个地图对象var point = new BMap.Point(116.331398,39.897445); //设置地图中心的位置map.centerAndZoom(point,12); //设置地图元素的可视层 map.enableScro

  • 如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)

    以下是使用js代码实现百度地图计算两地距离,代码如下所示: <script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script> <script language="javascript" type="text/javascript" src="js/area.j

  • PHP计算百度地图两个GPS坐标之间距离的方法

    本文实例讲述了PHP计算百度地图两个GPS坐标之间距离的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: /**  * 计算两个坐标之间的距离(米)  * @param float $fP1Lat 起点(纬度)  * @param float $fP1Lon 起点(经度)  * @param float $fP2Lat 终点(纬度)  * @param float $fP2Lon 终点(经度)  * @return int  */ function distanceBetw

  • 在jquery boxy中添加百度地图坐标拾取注意流程

    作为开发的初学者,这东西仅仅作为个人备份,如果能帮到忙也也不错(我开发用的php,但这是js这本身没多大影响) 这里要说明几个问题: 1.boxy调用的页面中不能出现<script>标签不然不能显示 2.boxy调用的时候要注意流程,要先加载出boxy然后再去渲染地图到boxy页面中 3.百度地图的加载js应放在弹出boxy的那个页面中 注意流程:boxy页面其实为单独的一个页面只是用了ajax中$.get('/index.php?r=comm/map_coordinate', functio

  • js 调用百度地图api并在地图上进行打点添加标注

    js 调用百度地图api并在地图上进行打点添加标注

    最近要做一个网页,具体内容是:上边有一个标题,下边分成两块,左边是地图.并且地图上有两个点,点击两个点有相应的提示信息,显示数据库里最新的两条数据信息.右边是一些文字说明.本人刚开始学习,做的也不是很好 总体效果如下所示: 首先新建map.php文件,代码如下 复制代码 代码如下: <!DOCTYPE html> <?php /* 创建与数据库的连接 */ $conn=mysql_connect("","","") or die

  • 百度地图经纬度转换到腾讯地图/Google 对应的经纬度

    实现目的:将百度地图经纬度 转换到 腾讯地图/Google 对应的经纬度. 方法1:使用代码进行转换 存在的问题:转换之后误差大,基本不可用 public static void Convert_BD09_To_GCJ02(double lat, double lng) { double x_pi = Math. PI * 3000.0 / 180.0; double x = lng - 0.0065, y = lat - 0.006; double z = Math. sqrt(x * x +

  • 百度地图自定义控件分享

    废话不多说了,直接奉上代码; 复制代码 代码如下: <script>         var map = new BMap.Map('allmap');         var Bcenter = new BMap.Point(116.404,39.915);         map.centerAndZoom(Bcenter,11);         //自定义控件         function staticControl(){             this.defaultAncho

  • Map.vue基于百度地图组件重构笔记分享

    Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能. 第一步:重构自定义的富文本对象,设置为全局对象. 原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下. 原代码是在父组件中处理好这个富文本对象需要的数据,

  • 利用百度地图API获取当前位置信息的实例

    利用百度地图API可以做很多事情,个人感觉最核心也是最基础的就是定位功能了.这里分享一个制作的JS可以实现登录网页后定位: <script type="text/javascript"> var map; var gpsPoint; var baiduPoint; var gpsAddress; var baiduAddress; var x; var y; function getLocation() { //根据IP获取城市 var myCity = new BMap.

  • 比例尺、缩略图、平移缩放之百度地图添加控件方法

    比例尺、缩略图、平移缩放之百度地图添加控件方法

    下面通过图文并茂的方式给大家详细介绍下比例尺.缩略图.平移缩放之百度地图添加控件方法. 地图控件概述 百度地图上负责与地图交互的UI元素称为控件.百度地图API中提供了丰富的控件,您还可以通过Control类来实现自定义控件. 地图API中提供的控件有: Control:控件的抽象基类,所有控件均继承此类的方法.属性.通过此类您可实现自定义控件. NavigationControl:地图平移缩放控件,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能.移动端提供缩放控件,默认位于地图右下

  • php+js实现百度地图多点标注的方法

    php+js实现百度地图多点标注的方法

    本文实例讲述了php+js实现百度地图多点标注的方法.分享给大家供大家参考,具体如下: 1.php创建json数据 $products = $this->product_db->select($where); $products_json = json_encode($products); 2.js传入json数据 类似于这样的结构 var markerArr = [{ title: "名称:广州火车站", point: "113.264531,23.157003

  • Android百度定位导航之基于百度地图移动获取位置和自动定位

    Android百度定位导航之基于百度地图移动获取位置和自动定位

    一.问题描述 使用百度地图实现如图所示应用,首先自动定位当前我起始位置(小圆点位置),并跟随移动不断自动定位我的当前位置 百度Api不同版本使用会有些差异,本例中加入lib如下: 二.编写MyApplication类 public class MyApplication extends Application { static MyApplication myApplication; BMapManager mBMapManager = null; String mStrKey = "7ZfuR

  • Android SDK 百度地图通过poi城市内检索简介接口的使用

    Android SDK 百度地图通过poi城市内检索简介接口的使用

    百度地图 SDK 不仅为广大开发者提供了炫酷的地图展示效果.丰富的覆盖物图层,更为广大开发者提供了多种 LBS 检索的能力.通过这些接口,开发者可以轻松的访问百度的 LBS 数据,丰富自己的移动端地图应用. 目前百度地图 SDK 为开发者提供的检索服务有: POI 检索:可以检索百度 POI 数据信息: 线路规划:利用百度的引擎帮助开发者规划线路: 在线建议检索.短链接分享.地理编码等等.... 本文将以一个很简单的 POI 城市内检索为例,像广大开发者介绍接口的使用. 第一步,选择并下载 SD

  • Android百度地图定位后获取周边位置的实现代码

    Android百度地图定位后获取周边位置的实现代码

    本文实例讲解Android百度地图定位后获取周边位置的实现代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical&q

  • 百度地图API之百度地图退拽标记点获取经纬度的实现代码

    本文给大家分享百度地图api之百度地图退拽标记点获取经纬度的实现方法,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0

  • Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡

    Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡

    一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二.编写MyApplication类 public class MyApplication extends Application { private static MyApplication mInstance = null; public boolean m_bKeyRight = true; pu

随机推荐