在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 相关文章推荐
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
邮箱下拉自动填充选择示例代码附图
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
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
基于vue的验证码组件的示例代码
2019/01/22 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
python批量生成条形码的示例
2020/10/10 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
英国大码女性时装零售商:Evans
2018/08/29 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
《桂花雨》教学反思
2014/04/12 职场文书
男女朋友协议书
2014/04/23 职场文书
班长竞选演讲稿
2014/04/24 职场文书
停车场管理协议书范本
2014/10/08 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python