在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入门教程(9) Document文档对象
Jan 31 Javascript
JavaScript 事件查询综合
Jul 13 Javascript
获取body标签的两种方法
Oct 13 Javascript
angular简介和其特点介绍
Jan 29 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
如何利用ES6进行Promise封装总结
Feb 11 Javascript
微信小程序实现点击效果
Jun 21 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Django中FilePathField字段的用法
2020/05/21 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
业务助理岗位职责
2013/11/18 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
教师先进个人材料
2014/12/17 职场文书
单方投资意向书
2015/05/11 职场文书
创业计划书之美容店
2019/09/16 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python