javascript 开发之百度地图使用到的js函数整理


Posted in Javascript onMay 19, 2017

 javascript 开发之百度地图使用到的js函数整理

接项目用到的地图,客户要求用百度地图,没办法只好用百度地图,这里总结一下,写的一些函数,注释比较详细!

//创建和初始化地图函数: 
    
    function initMap(){ 
     createMap();//创建地图 
     setMapEvent();//设置地图事件 
     addMapControl();//向地图添加控件 
     addMarker();//向地图中添加marker 
    } 
     
    //创建地图函数: 
    function createMap(){ 
     var map = new BMap.Map("container");//在百度地图容器中创建一个地图 
     var point = new BMap.Point(116.395645,39.929986);//定义一个中心点坐标 
     map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中 
     window.map = map;//将map变量存储在全局 
    } 
     
    //地图事件设置函数: 
    function setMapEvent(){ 
     map.enableDragging();//启用地图拖拽事件,默认启用(可不写) 
     map.enableScrollWheelZoom();//启用地图滚轮放大缩小 
     map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写) 
     map.enableKeyboard();//启用键盘上下左右键移动地图 
    } 
  
    //地图控件添加函数: 
    function addMapControl(){ 
      //向地图中添加缩放控件 
     var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); 
     map.addControl(ctrl_nav); 
      //向地图中添加缩略图控件 
     var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); 
     map.addControl(ctrl_ove); 
      //向地图中添加比例尺控件 
     var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); 
     map.addControl(ctrl_sca); 
    } 
     
    //标注点数组 
    var markerArr = [{title:"我的标记",content:"我的备注",point:"116.354539|39.970253",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}} 
      ]; 
    //创建marker 
    function addMarker(){ 
     for(var i=0;i<markerArr.length;i++){ 
      var json = markerArr[i]; 
      var p0 = json.point.split("|")[0]; 
      var p1 = json.point.split("|")[1]; 
      var point = new BMap.Point(p0,p1); 
      var iconImg = createIcon(json.icon); 
      var marker = new BMap.Marker(point,{icon:iconImg}); 
      var iw = createInfoWindow(i); 
      var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)}); 
      marker.setLabel(label); 
       
      map.addOverlay(marker); 
      label.setStyle({ 
         borderColor:"#808080", 
         color:"#333", 
         cursor:"pointer" 
      }); 
      (function(){ 
       var index = i; 
       var _iw = createInfoWindow(i); 
       var _marker = marker; 
       _marker.addEventListener("click",function(){ 
        this.openInfoWindow(_iw); 
       }); 
       _iw.addEventListener("open",function(){ 
        _marker.getLabel().hide(); 
       }) 
       _iw.addEventListener("close",function(){ 
        _marker.getLabel().show(); 
       }) 
       label.addEventListener("click",function(){ 
        _marker.openInfoWindow(_iw); 
       }) 
       if(!!json.isOpen){ 
        label.hide(); 
        _marker.openInfoWindow(_iw); 
       } 
      })() 
     } 
    } 
    //创建InfoWindow 
    function createInfoWindow(i){ 
     var json = markerArr[i]; 
     var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>"); 
     return iw; 
    } 
    //创建一个Icon 
    function createIcon(json){ 
     var icon = new BMap.Icon("http://openapi.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)}) 
     return icon; 
    } 
     
 initMap();//创建和初始化地图

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
微信小程序表单验证错误提示效果
May 19 #Javascript
微信小程序实现滑动删除效果
May 19 #Javascript
微信小程序图片横向左右滑动案例
May 19 #Javascript
layui导航栏实现代码
May 19 #Javascript
详解AngularJS controller调用factory
May 19 #Javascript
layer弹窗插件操作方法详解
May 19 #Javascript
layui选项卡效果实现代码
May 19 #Javascript
You might like
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php常用的url处理函数总结
2014/11/19 PHP
php include类文件超时问题处理
2015/02/06 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
StubHub德国:购买和出售门票
2017/09/06 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
New delete 与malloc free 的联系与区别
2013/02/04 面试题
文秘专业个人求职信
2013/12/22 职场文书
公务员培训心得体会
2013/12/28 职场文书
小学家长会邀请函
2014/01/23 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
鸟的天堂导游词
2015/01/31 职场文书
防卫过当辩护词
2015/05/21 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
Redis数据同步之redis shake的实现方法
2022/04/21 Redis