在jquery boxy中添加百度地图坐标拾取注意流程


Posted in Javascript onApril 03, 2014

作为开发的初学者,这东西仅仅作为个人备份,如果能帮到忙也也不错(我开发用的php,但这是js这本身没多大影响)

这里要说明几个问题:

1.boxy调用的页面中不能出现《script》标签不然不能显示

2.boxy调用的时候要注意流程,要先加载出boxy然后再去渲染地图到boxy页面中

3.百度地图的加载js应放在弹出boxy的那个页面中

注意流程:boxy页面其实为单独的一个页面只是用了ajax中$.get('/index.php?r=comm/map_coordinate', function(data){}方法来调用页面

关键触发js如下:

(function(){ 
$(document).ready(function() { $("#Mechine_mec_points").click(function(){ 
__MC.Map_coordinate.getcorrdinate(); 
}); 
}); 
__MC.Map_coordinate = { 
getcorrdinate:function(){ 
$.get('/index.php?r=comm/map_coordinate', function(data){ //调用boxy对应的页面,页面中就只有一个id=allmap的div 

new Boxy(data,{ //在外面已经加载好百度地图AIP的js 
'title':'地图坐标拾取', 
'modal':true, 
'draggable':false, 
'unloadOnHide' : true, 
'afterShow' : function(){ 

var map = new BMap.Map("allmap"); 
map.centerAndZoom(new BMap.Point(106.566872, 29.536861), 17); 
map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用 
map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用 
function showInfo(e){ 
$("#Mechine_mec_points").val(e.point.lng + ", " + e.point.lat); 
} 
map.addEventListener("click", showInfo); 
}//aftershow结束 
}); 
return false; 
}); 
}, 
} 
})();
Javascript 相关文章推荐
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 #Javascript
JS获取网页属性包括宽、高等等
Apr 03 #Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 #Javascript
js实现的复制兼容chrome和IE
Apr 03 #Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 #Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 #Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 #Javascript
You might like
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
vue多次循环操作示例
2019/02/08 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
寻找网站后台地址的python脚本
2014/09/01 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
PyTorch中的C++扩展实现
2020/04/02 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
python线程优先级队列知识点总结
2021/02/28 Python
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
中介业务员岗位职责
2014/04/09 职场文书
生死抉择观后感
2015/06/09 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书