在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数组Array sort方法使用深入分析
Feb 21 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
邮箱下拉自动填充选择示例代码附图
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
多文件上传的例子
2006/10/09 PHP
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
PHP无限分类(树形类)
2013/09/28 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
PHP7新特性
2021/03/09 PHP
window.open不被拦截的实现代码
2012/08/22 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
python计算n的阶乘的方法代码
2019/10/25 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
C语言面试题
2013/05/19 面试题
三好学生个人先进事迹材料
2014/05/17 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书