在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 相关文章推荐
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 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
yum命令安装php7和相关扩展
2016/07/04 PHP
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
在python里从协程返回一个值的示例
2019/02/19 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
小学生环保标语
2014/06/13 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
文体活动总结
2015/02/04 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
vue选项卡切换的实现案例
2022/04/11 Vue.js