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高亮效果的二种实现方法
Sep 14 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
php中动态变量用法实例
2015/06/10 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python Requests安装与简单运用
2016/04/07 Python
详解python运行三种方式
2019/05/13 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
python画环形图的方法
2020/03/25 Python
Python 如何对文件目录操作
2020/07/10 Python
Python reques接口测试框架实现代码
2020/07/28 Python
《藏戏》教学反思
2014/02/11 职场文书
《落花生》教学反思
2014/02/25 职场文书
初三班主任寄语大全
2014/04/04 职场文书
关于青春的演讲稿
2014/05/05 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
先进人物事迹材料
2014/12/29 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers