在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 相关文章推荐
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
中止javascript执行的方法
Feb 14 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
vue如何截取字符串
May 06 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
Node.js API详解之 util模块用法实例分析
May 09 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实现在多维数组中查找特定value的方法
2015/07/29 PHP
php实现点击可刷新验证码
2015/11/07 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
Python中使用asyncio 封装文件读写
2016/09/11 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
python进行文件对比的方法
2018/12/24 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
详解python中的index函数用法
2019/08/06 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
可贵的沉默教学反思
2014/02/06 职场文书
本科毕业生自荐信
2014/06/02 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
诉讼授权委托书
2014/10/15 职场文书
2016年记者节感言
2015/12/08 职场文书