在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 相关文章推荐
jquery easyui的tabs使用时的问题
Mar 23 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
Element InputNumber 计数器的实现示例
Aug 03 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
PHP脚本的10个技巧(7)
2006/10/09 PHP
教你如何把一篇文章按要求分段
2006/10/09 PHP
php面向对象值单例模式
2016/05/03 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
web性能优化之javascript性能调优
2012/12/28 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
python文件排序的方法总结
2020/09/13 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
python3处理word文档实例分析
2020/12/01 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
电脑教师的自我评价
2013/12/18 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
试用期员工考核制度
2014/01/22 职场文书
服装发布会策划方案
2014/05/22 职场文书
趣味运动会策划方案
2014/06/02 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
使用Pytorch训练two-head网络的操作
2021/05/28 Python
python ansible自动化运维工具执行流程
2021/06/24 Python
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL