在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 注意事项与常用语法小结
Jun 07 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP正则验证Email的方法
2015/06/15 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
PHP实现的策略模式示例
2019/03/20 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
DHTML Slide Show script图片轮换
2008/03/03 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
bootstrap table小案例
2016/10/21 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
python制作最美应用的爬虫
2015/10/28 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
正规的求职信范文分享
2013/12/11 职场文书
企事业单位求职者的自我评价
2013/12/28 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
2015年电教工作总结
2015/05/26 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书