As a beginner in development, this thing is only used as a personal backup. It would be nice if it can help (I use php for development, but it is js, which does not have much impact)
A few issues should be explained here :
1. The "script" tag cannot appear in the page called by boxy, otherwise it cannot be displayed
2. When calling boxy, pay attention to the process. You must first load boxy and then render the map. In the boxy page
3. The loading js of Baidu map should be placed in the page where the boxy pops up
Note the process: the boxy page is actually a separate page and just uses $.get in ajax ('/index.php?r=comm/map_coordinate', function(data){} method to call the page
key trigger js as follows:
(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){ //Calling the page corresponding to boxy, the page There is only one div with id=allmap
new Boxy(data,{ //The js of Baidu Map AIP has been loaded outside
'title':'Map coordinate picking',
'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(); //Enable scroll wheel zooming, disabled by default
map.enableContinuousZoom(); //Enable map inertial drag, disabled by default
function showInfo(e){
$("#Mechine_mec_points").val(e.point.lng ", " e.point .lat);
}
map.addEventListener("click", showInfo);
}//aftershow ends
});
return false;
});
},
}
})();