在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 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
微信小程序实现左右列表联动
May 19 Javascript
vue项目创建步骤及路由router
Jan 14 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
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP CodeBase:将时间显示为"刚刚""n分钟/小时前"的方法详解
2013/06/06 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
简略的前端架构心得&&基于editor为例子的编码小技巧
2010/11/25 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
python url 参数修改方法
2018/12/26 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
购房协议书范本
2014/04/11 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
离婚协议书样本
2015/01/26 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书