在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 17 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
js+css实现红包雨效果
Jul 12 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
邮箱下拉自动填充选择示例代码附图
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 中执行系统外部命令
2006/10/09 PHP
?繁体转换的class
2006/10/09 PHP
mysql limit查询优化分析
2008/11/12 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
python中的tcp示例详解
2018/12/09 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Django REST framework内置路由用法
2019/07/26 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
农村门前三包责任书
2014/07/25 职场文书
个人剖析材料范文
2014/09/30 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang