在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 相关文章推荐
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
PHP5 面向对象(学习记录)
2009/12/02 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
Numpy之random函数使用学习
2019/01/29 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
继承公证书样本
2014/04/04 职场文书
英语系毕业生求职信
2014/07/13 职场文书
2014年度培训工作总结
2014/11/27 职场文书