在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 相关文章推荐
动态样式类封装JS代码
Sep 02 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
js实现无缝轮播图特效
May 09 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
小程序实现密码输入框
Nov 16 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生成缩略图的类代码
2008/10/02 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
django rest framework 自定义返回方式
2020/07/12 Python
python math模块的基本使用教程
2021/01/16 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
科技节口号
2014/06/19 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers