在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 相关文章推荐
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
Vue基于iview table展示图片实现点击放大
Aug 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
CI框架集成Smarty的方法分析
2016/05/17 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
js获取页面description的方法
2015/05/21 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
javascript中闭包closure的深入讲解
2021/03/03 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
python实现黑客字幕雨效果
2018/06/21 Python
Python中反射和描述器总结
2018/09/23 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
考试违纪检讨书
2014/02/02 职场文书
房屋维修协议书范本
2014/09/25 职场文书
班主任寄语2015
2015/02/26 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
教学副校长工作总结
2015/08/13 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python