Skip to content

TopuNet/qq_map

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 

Repository files navigation

腾讯地图插件v2.0.0

安装:

   安装: npm install bai-qq_map

文件结构

1.widget/lib文件夹中的 qq_map.js,baidu_map.js 放入项目文件夹widget/lib中,
2.inc文件夹中的图片和weui.min.css放入项目文件inc中
3.f文件夹中的safari.html放入项目f文件夹中
4.widget/app中safari.js放入项目widget/app文件夹中,并且在widget/app.js 中添加引用

页面引用

requireJs引用

1. 页面底端引用require.js前,引用 http://map.qq.com/api/js?v=2.exp&key=d84d6d83e0e51e481e50454ccbe8986b&libraries=geometry   key是申请的腾讯地图秘钥,不加秘钥的话有些功能会用不了  libraries=geometry开启获取我的位置服务
2. 后引用 https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js
3. 依赖qq_map.js, zepto.min.js和baidu_map.js 成功后返回对象qq_map

功能配置及启用方法

调用方法

//创建对象
var map1 = new qq_map();

//初始化地图
map1.init({
    id_map: 'qq_map', //存放qq地图的盒子id,只能用id
    address: [{'address':'北京四惠东站','info':'天安门','index':0}, {'address':'北京王府井','info':'王府井123','index':0,'fn':function(){alert(2);}},{'address':'北京香山','info':'香山','index':0,'fn':function(){alert(3);}}],
    //此处为一个数组,address-添加到地图中的标记名称,info-点击标记时的提示信息(必填),index-设置显示图标数字0-9,0不显示数字,1-9显示对应数字(必填),fn-回调函数,点击标记左侧执行,可以不传
    zoom: 12, //地图等级,默认12,
    ZoomControl: true, //是否显示地图缩放控件,true或false,默认true
    panControl: true, //是否显示平移控件,true或false,默认true
    scaleControl: true, //是否显示比例尺控件,true或false,默认true
    mapTypeControlOptions: true, //是否显示地图类型控件,true或false,默认true
    draggable: true, //设置是否可以拖拽,true或false,默认true
    CenterMe: false, //设置地图是否已我的位置为中心,true-以我的位置为中心,false-不以我的位置为中心,当设置为false时,以地图中传的第一个点为中心,默认-false
    ShowMeMarker: true, //设置地图是否显示我的位置的marker,true-显示,false-不显示,默认-true
    ShowLable: false,  //设置是否显示提示框,true-显示,false-不显示,默认-false
    ChooseMaptypeZindex: 6001,  //设置选择地图类型的z_index,默认6001
    ChooseLater_callback: function(){        //选择地图类型后的回调,默认微信弹层收起
        $('#qq_map_iosActionsheet').removeClass('weui-actionsheet_toggle');
        $('#qq_map_iosMask').fadeOut(200);
    }
 });
 
 
 //地图添加marker方法
 var opt = {
      zoom : 11,      //重设地图级别
      judge : false,  //添加标记前是否删除原标记,true或false,默认false
      address : [{'address':'北京南站','info':'北京南站','index':4},{'address':'北京站','info':'北京站','index':5}]   
      //此处为一个数组,address-添加到地图中的标记名称,info-点击标记时的提示信息(必填),index-设置显示图标数字0-9,0不显示数字,1-9显示对应数字(必填) 
  }
  map1.AddMarker(opt);
  
  
  //地图添加搜索气泡点,可以设置显示气泡个数,不得超过9个,默认显示9个,气泡返回数据按每页几个的方式返回,可以设置显示哪一页的气泡,默认显示第一页
  var opt = {
        keywords : keywords,          //搜索关键字
        page : 1,               //显示返回来的marker页数
        pageNum : 9             //每页显示marker数量
   }
   map1.search(opt)
   当关键字搜索不到结果时,控制台输出 检索失败,您输入的地址未找到结果
   
    
    //创建地图检索url,(设置中心点,和半径,在此范围内查找关键字位置)此方法需要传一个数组,且数组只有一个元素,调用方法如下
    var _opt = [{
            keyword: '酒店',           //搜索关键字  (必填)
            address: '北京东单',       //设置搜索的中心位置,尽可能写的具体些,如果找不到所写的位置,方法不会继续执行(不会跳页)(必填)
            radius: '1000'            //设置搜索半径,单位米(必填)
        }]
   map1.CreateSearchUrl(_opt);
   当未找到填写地址的位置时,控制台输出: 地址解析失败,请重新输入地址


   //定位我的位置,需要传一个参数json形式,success-获取我的精准位置成功的回调,error-ip获取我的位置回调,result-返回我的位置信息
   //result是我的位置返回值,是一个json,其中有lat和lng属性,代表地点经纬度,通过 new qq.maps.LatLng(result.lat, result.lng) 可以创建一个我的位置的点 
   var _opt = {
        success : function(result){
            _this.own = new qq.maps.LatLng(result.lat, result.lng);
            //创建我的位置marker
            _this.setMeMarker.apply(_this,[result]);
        },
        error : function(result){
            _this.own = new qq.maps.LatLng(result.lat, result.lng);
            //创建我的位置marker
            _this.setMeMarker.apply(_this,[result]);
        }
    };
   map1.PositionMe(_opt);

   //获取两点间距离,需要传一个参数json形式,address_1和address_2是两个点的位置信息,address_1-不传默认为我的位置,address_2-必传参数,success-获取两点距离成功的回调,dis-两点的距离,单位-米
   map1.GetDistance({
        address_1 : '北京南站',
        address_2 : '北京东单',
        success : function(dis){
            alert(dis);
        }
    })

    //创建调用路线规划的方法,(调用之后直接跳转到路线页面)
    map1.CreateRoute('北京市朝阳区百子湾苹果社区')

更新日志

v2.0.0

  1.修改demo模型,改成require模式
  2.添加参数 1. ShowLable: false,  //设置是否显示提示框,true-显示,false-不显示,默认-false
             2. ChooseMaptypeZindex: 6001,  //设置选择地图类型的z_index,默认6001
             3. ChooseLater_callback: function(){        //选择地图类型后的回调,默认微信弹层收起
                  $('#qq_map_iosActionsheet').removeClass('weui-actionsheet_toggle');
                  $('#qq_map_iosMask').fadeOut(200);
                }
  3.导航修改成微信样式底部弹出的方式,
  4.添加百度导航和谷歌导航

v1.1.4

  添加外部调用规划路线方法

v1.1.3

  添加标注的回调函数,点击标注左侧时执行

v1.1.2

 1.添加获取两点距离,外部调用方法
 2.添加获取我的位置,外部调用方法
 3.删除创建位置展示url方法

v1.1.1

  创建地图插件