在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学习笔记2 函数
Jan 11 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
vue项目中openlayers绘制行政区划
Dec 24 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 Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php随机抽奖实例分析
2015/03/04 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
json字符串传到前台input的方法
2018/08/06 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
vue--vuex详解
2019/04/15 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
vue封装swiper代码实例解析
2019/10/08 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
python开根号实例讲解
2020/08/30 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
信息员培训方案
2014/06/12 职场文书
社区班子对照检查材料
2014/08/27 职场文书
教师师德承诺书2016
2016/03/25 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis