------------------自说自话-----------------------------

好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了。

但是后来想想,有些东西还是要整理记录下来的好,多个备份也好。

--------------------------------------------

下面正题,最近公司项目用百度地图API较多。后面还有使用高德地图API,后续整理记录上。

1.初始化地图,并设置地图中心点

var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别

当然也可以根据城市名称设置地图的中心点:
map.centerAndZoom("上海",15);  

map.addControl(new BMap.ScaleControl());    //添加左下方比例尺控件
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
map.setCurrentCity("北京");          // 设置地图显示的城市

 2.拖拽地图与滚轮的使用

map.enableScrollWheelZoom(true);
map.disableDragging();     //禁止拖拽
map.enableScrollWheelZoom();    //启用滚轮放大缩小

3.创建地图的时候,关闭地图底图按钮,建筑的可点功能

var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时,关闭底图可点功能 

4.移动地图,设置地图最大最小的缩放级别

var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别

//当然也可以动态设置级别:
map.setMaxZoom(10);
map.setMinZoom(2);

5.获得地图当前中心点,返回两点间的距离

getCenter()
getDistance(start:Point, end:Point)
var pointA = new BMap.Point(106.486654,29.490295);  // 创建点坐标A--大渡口区
var pointB = new BMap.Point(106.581515,29.615467);  // 创建点坐标B--江北区
alert('距离是:'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位

6.添加覆盖物,移除覆盖物,清楚所有覆盖物

addOverlay(overlay:Overlay)
removeOverlay(overlay:Overlay)
clearOverlays()
getOverlays()    //返回地图上所有的覆盖物

7.地图添加控件的时候可以设置地图放在四个角中的哪个角

var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺
BMAP_ANCHOR_TOP_LEFT //表示控件定位于地图的左上角。

BMAP_ANCHOR_TOP_RIGHT //表示控件定位于地图的右上角。

BMAP_ANCHOR_BOTTOM_LEFT //表示控件定位于地图的左下角。

BMAP_ANCHOR_BOTTOM_RIGHT //表示控件定位于地图的右下角。

//缩放空间的type的四种类型:
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角,仅包含平移和缩放按钮
BMAP_NAVIGATION_CONTROL_LARGE //表示显示完整的平移缩放控件。

BMAP_NAVIGATION_CONTROL_SMALL //表示显示小型的平移缩放控件。

BMAP_NAVIGATION_CONTROL_PAN //表示只显示控件的平移部分功能。

BMAP_NAVIGATION_CONTROL_ZOOM //表示只显示控件的缩放部分功能

8.地图采集的经纬度,转化为度数,再转化为百度坐标点,在用new BMap.Point转换成打在地图上的点

9.Marker,添加地图各个事件

/设置marker的弹跳
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);        // 创建标注
map.addOverlay(marker);                     // 将标注添加到地图中
marker.enableDragging();  //设置点可以拖拽
//设置marker的样式与偏移
var myIcon = new BMap.Icon(__baseUrl + "/images/circle_blue.png",new BMap.Size(16,16),
    {
offset:new BMap.Size(10,25),// 图标中央下端的尖角位置。
imageOffset:new BMap.Size(0,0- index *25)// 设置图片偏移
}
);
//添加事件
marker.addEventListener("click", function(e){
 alert("您点击了标注");
alert(e.point.lng + ", " + e.point.lat);
});
//移除事件
map.removeEventListener("click", showInfo);  

10.信息窗口

信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开,也可以在标注对象上打开(此时信息窗口的坐标与标注的坐标一致)。 您可以使用InfoWindow来创建一个信息窗实例,注意同一时刻地图上只能有一个信息窗口处于打开状态。
var opts = {
 width : 250,     // 信息窗口宽度
 height: 100,     // 信息窗口高度
 title : "Hello"  // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
map.addOverlay(marker);              // 将标注添加到地图中
    map.centerAndZoom(point, 15);
    var opts = {
      width : 200,     // 信息窗口宽度
      height: 100,     // 信息窗口高度
      title : "海底捞王府井店" , // 信息窗口标题
      enableMessage:true,//设置允许信息窗发送短息
      message:"亲耐滴,晚上一起吃个饭吧?戳下面的链接看下地址喔~"
    }
    var infoWindow = new BMap.InfoWindow("地址:北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
    marker.addEventListener("click", function(){
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    });
 
 
//添加复杂的信息窗口
var sContent =
    "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" +
    "<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>" +
    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" +
    "</div>";
var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
 
 
//获取信息窗口的内容
infoWindow.getContent()

11.折线

Polyline表示地图上的折线覆盖物。它包含一组点,并将这些点连接起来形成折线。
var polyline = new BMap.Polyline([
   new BMap.Point(116.399, 39.910),
   new BMap.Point(116.405, 39.920)
 ],
 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
);
map.addOverlay(polyline);

12.控件工具的创建与开关

var map = new BMap.Map("container");
var myDis = new BMapLib.DistanceTool(map);
myDis.open()
myDis.close()

13.矩形范围搜索

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var local = new BMap.LocalSearch(map,
              { renderOptions:{map: map}});
local.searchInBounds("银行", map.getBounds());

14.根据地址描述获得坐标 与 根据坐标得到地址描述

var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint("北京市海淀区上地10街10号", function(point){
          if (point) {
              map.centerAndZoom(point, 16);
              map.addOverlay(new BMap.Marker(point));
          }
      }, "北京市");
var map =new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.404,39.915),11);// 创建地理编码实例      var myGeo =new BMap.Geocoder();// 根据坐标得到地址描述
myGeo.getLocation(new BMap.Point(116.364,39.993),function(result){if(result){alert(result.address);}});

16.自动移动,缩放地图

setTimeout(function(){
        map.panTo(new BMap.Point(113.262232,23.154345));   //两秒后移动到广州
    }, 2000);

map.setZoom(14);  

17.地图显示范围

//设置
var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));
    try {
        BMapLib.AreaRestriction.setBounds(map, b);
    } catch (e) {
        alert(e);
    }

//获取
var bs = map.getBounds();   //获取可视区域
    var bssw = bs.getSouthWest();   //可视区域左下角
    var bsne = bs.getNorthEast();   //可视区域右上角
    alert("当前地图可视范围是:" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);
 

18.给地图添加文字,设置样式

var opts = {
      position : point,    // 指定文本标注所在的地理位置
      offset   : new BMap.Size(30, -30)    //设置文本偏移量
    }
    var label = new BMap.Label("欢迎使用百度地图,这是一个简单的文本标注哦~", opts);  // 创建文本标注对象
        label.setStyle({
             color : "red",
             fontSize : "12px",
             height : "20px",
             lineHeight : "20px",
             fontFamily:"微软雅黑"
         });
    map.addOverlay(label);
 
给覆盖物添加文字标签:
var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中

    var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
    marker.setLabel(label);
 
//获取覆盖物信息:
function getAttr(){
        var p = marker.getPosition();       //获取marker的位置
        alert("marker的位置是" + p.lng + "," + p.lat);
    }
 

19.添加海量点

 if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
        var points = [];  // 添加海量点数据
        for (var i = 0; i < data.data.length; i++) {
          points.push(new BMap.Point(data.data[i][0], data.data[i][1]));
        }
        var options = {
            size: BMAP_POINT_SIZE_SMALL,
            shape: BMAP_POINT_SHAPE_STAR,
            color: '#d340c3'
        }
        var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
        pointCollection.addEventListener('click', function (e) {
          alert('单击点的坐标为:' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
        });
        map.addOverlay(pointCollection);  // 添加Overlay
    } else {
        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
    }

20.自定义右键菜单

var menu = new BMap.ContextMenu();
    var txtMenuItem = [
        {
            text:'放大',
            callback:function(){map.zoomIn()}
        },
        {
            text:'缩小',
            callback:function(){map.zoomOut()}
        }
    ];
    for(var i=0; i < txtMenuItem.length; i++){
        menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
    }
    map.addContextMenu(menu);
 
 
 
//给覆盖物添加右键菜单
var removeMarker = function(e,ee,marker){
        map.removeOverlay(marker);
    }
    //创建右键菜单
    var markerMenu=new BMap.ContextMenu();
    markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));

    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    marker.addContextMenu(markerMenu);
 
 

21.地图鼠标

//设置鼠标样式
map.setDefaultCursor("url('bird.cur')");   //设置地图默认的鼠标指针样式

//鼠标拖拽地图并设置跟鼠文本
var myDrag = new BMapLib.RectangleZoom(map, {
        followText: "拖拽鼠标进行操作"
    });
    myDrag.open();  //开启拉框放大
    //myDrag.close();  //关闭拉框放大
 
 
//鼠标测距
var myDis = new BMapLib.DistanceTool(map);
    map.addEventListener("load",function(){
        myDis.open();  //开启鼠标测距
        //myDis.close();  //关闭鼠标测距大
    });
 
 
//单击获取点击的经纬度
    map.addEventListener("click",function(e){
        alert(e.point.lng + "," + e.point.lat);
    });
 
 

22.最佳视野

 当地图打点过多时,我们要使得所有的点都在我们地图上的可视区域内,就用下面的方法
map.setViewport(points); //让标注显示在最佳视野内

百度地图API的使用的更多相关文章

  1. 吐槽贴:百度地图 api 封装 的实用功能 [源码下载]

    ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...

  2. 百度地图API 批量添加 带检索功能的信息窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 百度地图api的覆盖物样式与bootstrap样式冲突解决办法

    使用百度地图api 和 bootstrap ,发现标注样式出现了问题 label左侧 宽度变得非常窄 正常情况下应该是下面这样的: 原因是boostrap样式和百度地图样式冲突了. 解决办法: .ba ...

  4. 百度地图API试用--(初次尝试)

    2016-03-17: 百度地图API申请key的步骤相对简单,不做过多阐述. 初次使用百度地图API感觉有点神奇,有些功能加进来以后有点问题,注释掉等有空再解决. 代码如下: <%@ page ...

  5. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  6. 百度地图API简单应用

    在做移动端应用时经常用到百度地图API,百度API有强大的示例和文档,开发之前去百度相关网站注册密钥,很块博主只花了几分钟 百度地图API范例 百度地图API文档说明 例子1:输入特定关键字绘制地图标 ...

  7. Winform实现用多线程、百度地图API解析某公司的物理地址

    前言 作为一个很挫的C#新手总喜欢自己写点儿不着边际的东西,本人是个新手加菜鸟,写B/S的,工作中,任务完成了,空闲下来,总想继续学点儿什么,由此触发了本篇文章了.个人一直认为,.NET中,C/S所要 ...

  8. 百度地图API的IP定位城市和浏览器定位(转)

    百度地图API提供了Geolocation 和 LocalCity两个服务类. 这俩API可以分别供用户在JavaScript中进行定位和城市确认. 1 本质上,Geolocation这个类是使用了支 ...

  9. 百度地图api

    引入js <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak ...

随机推荐

  1. 3.Kali 1.0 / 2.0 安装中文输入法(谷歌pinyin + 其他)

    1.kali默认是没有中午输入法的,需要自己安装一下 2.首先我们先获取root权限 dnt@HackerKali:~$ su密码: 3.安装中文输入法(apt-get 指令不会的同学可以学习一下基础 ...

  2. win7远程桌面连接总是显示凭证不工作解决方法总结

    使用远程桌面连接可以在网络的另一端控制某台计算机,对计算机进行实时操作,但有时会出现连接失败的情况,比如总是显示您的凭证不工作,下面是我对此问题解决办法的总结. 方法一: 1.在开始菜单内的运行框里输 ...

  3. 解决zookeeper报错[NIOServerCxn.Factory:0.0.0.0/0.0.0.0:2181:NIOServerCnxn@362] - Exception causing close

    zookeeper.out报错: 2016-12-10 18:05:46,958 [myid:3] - WARN  [NIOServerCxn.Factory:0.0.0.0/0.0.0.0:2181 ...

  4. Xamarin 跨移动端开发系列(01) -- 搭建环境、编译、调试、部署、运行

    如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是最好的选择,编写一次,即可发布到Android和iOS平台,真是利器中的利器啊!好了,废话不多说,就开始吧, ...

  5. 关于Java单例

    参考资料:http://blog.csdn.net/haoel/article/details/4028232 public class SingletonTest implements Runnab ...

  6. UVa 11210 - Chinese Mahjong

    解题报告:麻将的规则这里就不说了,这题我们可以用暴力的方法,所以我们应该这样枚举,即将34张牌的每一张牌都放到原来的十三张牌里面去,所以这时我们只要判断这十四张牌能不能胡,因为若要胡的话一定要有一个对 ...

  7. Python装饰模式实现源码分享

    1.一般来说,通过继承可以获得父类的属性,还可以通过重载修改其方法. 2.装饰模式可以不以继承的方式而动态地修改类的方法. 3.装饰模式可以不以继承的方式而返回一个被修改的类. 4.基本实现 程序演示 ...

  8. Rhel6-keepalived+lvs配置文档

    系统环境: rhel6 x86_64 iptables and selinux disabled 主机: 192.168.122.119 server19.example.com 192.168.12 ...

  9. uml类关系

    类间的关系:http://www.open-open.com/lib/view/open1328059700311.html 泛化 . 实现 . 关联 . 组合 . 聚合 . 依赖 泛化是继承类,实现 ...

  10. springsecurity4+springboot 实现remember-me 发现springsecurity 的BUG

    前言:现在开发中,记住我这个功能是普遍的,用户不可能每次登录都要输入用户名密码.昨天准备用spring security的记住我功能,各种坑啊,吐血 . 先看下具体实现吧. spring securi ...