在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控制swfObject应用介绍
Nov 29 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 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 mysql事务问题实例分析
2016/01/18 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
jquery获得下拉框值的代码
2011/08/13 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python之文件读取一行一行的方法
2018/07/12 Python
python实现PID算法及测试的例子
2019/08/08 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
致接力运动员广播稿
2014/02/17 职场文书
第二课堂活动总结
2014/05/07 职场文书
护士医德医风自我评价
2014/09/15 职场文书
2014小学年度工作总结
2014/12/20 职场文书
个人委托函范文
2015/01/29 职场文书
世界文化遗产导游词
2015/02/13 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
Python中如何处理常见报错
2022/01/18 Python