在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 13 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
vue-router 按需加载 component: () => import() 报错的解决
2020/09/22 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
python实现从wind导入数据
2019/12/03 Python
python中pdb模块实例用法
2021/01/15 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
商业房地产广告语
2014/03/13 职场文书
优秀应届生求职信
2014/06/16 职场文书
总经理聘用协议书
2015/09/21 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
OpenCV实现反阈值二值化
2021/11/17 Java/Android