在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 jQuery中的DOM操作
Mar 21 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
createObjectURL方法实现本地图片预览
Sep 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生成自己的LOG文件
2006/10/09 PHP
我常用的几个类
2006/10/09 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
Python基于内置函数type创建新类型
2020/10/22 Python
资深地理教师自我评价
2013/09/21 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
党员剖析材料范文
2014/12/18 职场文书
校长个人总结
2015/03/03 职场文书
MySQL分区路径子分区再分区
2022/04/13 MySQL