在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获取元素CSS样式代码示例
Nov 28 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
第八节 访问方式 [8]
2006/10/09 PHP
PHP的ASP防火墙
2006/10/09 PHP
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
深入PHP curl参数的详解
2013/06/17 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
《Python学习手册》学习总结
2018/01/17 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
用python进行视频剪辑
2020/11/02 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
网上书店创业计划书
2014/01/12 职场文书
乔迁宴答谢词
2014/01/21 职场文书
临床护士自荐信
2014/01/31 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
学校重阳节活动总结
2015/03/24 职场文书
网络舆情信息简报
2015/07/21 职场文书