在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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
js切换div css注意的细节
Dec 10 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
JS实现标签页切换效果
May 04 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
JavaScript中CreateTextFile函数
Aug 30 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 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
thinkphp缓存技术详解
2014/12/09 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
深入研究React中setState源码
2017/11/17 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
Python版微信红包分配算法
2015/05/04 Python
12步教你理解Python装饰器
2016/02/25 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
PyQt5每天必学之组合框
2018/04/20 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
python实现银行账户系统
2021/02/22 Python
后备干部考察材料
2014/02/12 职场文书
cf收人广告词
2014/03/14 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
松材线虫病防治方案
2014/06/15 职场文书
统计工作个人总结
2015/03/03 职场文书
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js
MySQL添加索引特点及优化问题
2022/07/23 MySQL