在jquery boxy中添加百度地圖坐標(biāo)拾取注意流程
更新時間：2014年04月03日 16:30:04 作者：
這篇文章主要介紹了在jquery boxy中添加百度地圖坐標(biāo)拾取注意流程,需要的朋友可以參考下
作為開發(fā)的初學(xué)者，這東西僅僅作為個人備份，如果能幫到忙也也不錯（我開發(fā)用的php，但這是js這本身沒多大影響）
這里要說明幾個問題：
1.boxy調(diào)用的頁面中不能出現(xiàn)《script》標(biāo)簽不然不能顯示
2.boxy調(diào)用的時候要注意流程，要先加載出boxy然后再去渲染地圖到boxy頁面中
3.百度地圖的加載js應(yīng)放在彈出boxy的那個頁面中
注意流程：boxy頁面其實為單獨的一個頁面只是用了ajax中$.get('/index.php?r=comm/map_coordinate', function(data){}方法來調(diào)用頁面
關(guān)鍵觸發(fā)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){ //調(diào)用boxy對應(yīng)的頁面，頁面中就只有一個id=allmap的div
new Boxy(data,{ //在外面已經(jīng)加載好百度地圖AIP的js
'title':'地圖坐標(biāo)拾取',
'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(); //啟用滾輪放大縮小，默認(rèn)禁用
map.enableContinuousZoom(); //啟用地圖慣性拖拽，默認(rèn)禁用
function showInfo(e){
$("#Mechine_mec_points").val(e.point.lng + ", " + e.point.lat);
}
map.addEventListener("click", showInfo);
}//aftershow結(jié)束
});
return false;
});
},
}
})();
這里要說明幾個問題：
1.boxy調(diào)用的頁面中不能出現(xiàn)《script》標(biāo)簽不然不能顯示
2.boxy調(diào)用的時候要注意流程，要先加載出boxy然后再去渲染地圖到boxy頁面中
3.百度地圖的加載js應(yīng)放在彈出boxy的那個頁面中
注意流程：boxy頁面其實為單獨的一個頁面只是用了ajax中$.get('/index.php?r=comm/map_coordinate', function(data){}方法來調(diào)用頁面
關(guān)鍵觸發(fā)js如下：
復(fù)制代碼 代碼如下:
(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){ //調(diào)用boxy對應(yīng)的頁面，頁面中就只有一個id=allmap的div
new Boxy(data,{ //在外面已經(jīng)加載好百度地圖AIP的js
'title':'地圖坐標(biāo)拾取',
'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(); //啟用滾輪放大縮小，默認(rèn)禁用
map.enableContinuousZoom(); //啟用地圖慣性拖拽，默認(rèn)禁用
function showInfo(e){
$("#Mechine_mec_points").val(e.point.lng + ", " + e.point.lat);
}
map.addEventListener("click", showInfo);
}//aftershow結(jié)束
});
return false;
});
},
}
})();
相關(guān)文章
鋒利的jQuery 要點歸納（三） jQuery中的事件和動畫（上：事件篇）
鋒利的jQuery 要點歸納 jQuery中的事件和動畫（上：事件篇）2010-03-03
jQuery實現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果,以完整實例形式分析了jQuery響應(yīng)鼠標(biāo)事件實現(xiàn)針對頁面元素的遍歷及樣式的動態(tài)操作技巧,需要的朋友可以參考下2015-09-09
jQuery獲取父節(jié)點、子節(jié)點、兄弟節(jié)點的代碼
這篇文章主要介紹了jQuery獲取父節(jié)點、子節(jié)點、兄弟節(jié)點的代碼,需要的朋友可以參考下2023-06-06![基于jquery的lazy loader插件實現(xiàn)圖片的延遲加載[簡單使用]](http://img.jbzj.com/images/xgimg/bcimg3.png)
基于jquery的lazy loader插件實現(xiàn)圖片的延遲加載[簡單使用]
當(dāng)網(wǎng)站上有大量圖片要展示的話，如果一次把所有的圖片都加載出來的話，這勢必會影響網(wǎng)站的加載速度，給用戶帶來比較差的體驗。2011-05-05
jQuery中數(shù)據(jù)緩存$.data的用法及源碼完全解析
這篇文章主要介紹了jQuery中的數(shù)據(jù)緩存$.data的用法及源碼完全解析,深入解讀了jQuery對緩存對象的讀寫和移除的實現(xiàn),需要的朋友可以參考下2016-04-04
該系列文章是我閱讀<jQuery Plugin Development Beginner's Guide>后的總結(jié)，有興趣的朋友可以去讀原版的書籍2012-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)滑動tab選項卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
淺析jQuery Ajax請求參數(shù)和返回數(shù)據(jù)的處理
這篇文章主要介紹了淺析jQuery Ajax請求參數(shù)和返回數(shù)據(jù)的處理的相關(guān)資料,需要的朋友可以參考下2016-02-02
uploadify ，簡單實用的flash上傳組件，兼容性良好。 現(xiàn)已有html5版本2012-06-06
iframe在復(fù)合文檔中經(jīng)常用到，利用jquery操作iframe可以大幅提高效率，這里收集一些基本操作，需要的朋友可以參考下2013-07-07