在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 相关文章推荐
JS代码放在head和body中的区别分析
Dec 01 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
vue中render函数的使用详解
Oct 12 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 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
PHP中文汉字验证码
2007/04/08 PHP
深入解析php之apc
2013/05/15 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
在漏洞利用Python代码真的很爽
2007/08/26 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
结婚周年感言
2014/02/24 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
护理工作个人总结
2015/03/03 职场文书
社区敬老月活动总结
2015/05/07 职场文书
关于开学的感想
2015/08/10 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python