在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+json 通用三级联动下拉列表
Apr 19 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 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对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
php中socket的用法详解
2014/10/24 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
如何提高python 中for循环的效率
2020/04/15 Python
python 读取.nii格式图像实例
2020/07/01 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
致裁判员加油稿
2014/02/08 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
检讨书范文2000字
2015/01/28 职场文书
新员工辞职信范文
2015/05/12 职场文书
小学英语教学随笔
2015/08/14 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
Elasticsearch 批量操作
2022/04/19 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS