在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中的标签语句
Jun 19 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
easyui validatebox验证
Apr 29 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
php&java(一)
2006/10/09 PHP
收藏的一个php小偷的核心程序
2007/04/09 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
如何卸载python插件
2020/07/08 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
新年抽奖获奖感言
2014/03/02 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
高一学生期末评语
2014/04/25 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
企业党建工作总结2015
2015/05/26 职场文书
简爱读书笔记
2015/06/26 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python