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 相关文章推荐
16个最流行的JavaScript框架[推荐]
May 29 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
jQuery中extend函数详解
Jul 13 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
js实现简易聊天对话框
Aug 17 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
微信小程序实现弹框效果
May 26 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
微信小程序表单验证错误提示效果
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
根德YB400的电路分析
2021/03/02 无线电
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
初识PHP中的Swoole
2016/04/05 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
JavaScript 继承的实现
2009/07/09 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
EsLint入门学习教程
2017/02/17 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
python实现Adapter模式实例代码
2018/02/09 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
Python简易版停车管理系统
2019/08/12 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
人事部岗位职责范本
2014/03/05 职场文书
学校党员对照检查材料
2014/08/28 职场文书
思想政治表现评语
2015/01/04 职场文书
实习报告范文
2019/07/30 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS