在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 04 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
webpack下实现动态引入文件方法
Feb 22 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 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
Wordpress php 分页代码
2009/10/21 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python入门必须知道的11个知识点
2018/03/21 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
小学新教师培训方案
2014/02/03 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
班主任高考寄语
2015/02/26 职场文书
银行自荐信怎么写
2015/03/05 职场文书