安装: 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
创建地图插件